.box_content ::selection {
background:#CCCC33; /* Safari */
}
.box_content ::-moz-selection {
background:#CCCC33; /* Firefox */
}
Anyone know if I can combine those like this?
.box_content ::selection .box_content ::-moz-selection {
background:#CCCC33;
}
Or maybe like:
.box_content ::selection, .box_content ::-moz-selection {
background:#CCCC33;
}
The second one is correct. You can use a comma to separate css selection rules.
So given:
selector-rule1, selector-rule2 {
style-x;
style-y;
}
This will apply style-x & style-y to anything that matches either selector-rule1 or selector-rule2.
Just to explain why your first example won't work, its because spaces imply ancestor-descendant relationships, so if you have:
selector-rule4 selector-rule4 {
style-z;
}
Then style-z will be applied to anything that matches selector-rule4 if it is also an an ancestor of something that matches selector-rule3.
More info on selectors here.
Your second example should work fine.
You need to use a comma to group the selectors:
.box_content ::selection, .box_content ::-moz-selection {
background:#CCCC33;
}
Your second example can’t work because a browser has to ignore the complete rule:
When a user agent cannot parse the
selector (i.e., it is not valid CSS
2.1), it must ignore the selector and the following declaration block (if
any) as well.
Opera and Webkit can’t parse the Gecko proprietary selector and Gecko can’t parse the regular ::selection. So the rule will never be applied.
Related
I am using selector to select all elements not having one class:
.list th:not(.foo) {
/* some rules */
}
How can I apply this to more than one class?
.list th:not(.foo), .list th:not(.bar) {
/* some rules */
}
The CSS above will not of course do that, I need something like this pseudo:
.list th:not(.foo and .bar)
Is it possible in CSS and how?
You can use as many :not() selectors as you like.
:not(.foo):not(.bar)
With upcoming CSS4 selectors you can use a syntax like:
:not(.class1, .class2, .class3)
and so on. But browser support isn't good so far. To be able to use it today, you can use cssnext for example.
.list th:not[class*="class"] { }
It will work with all classes, like class1, class2 etc.
Use comma to separate class name can get you want
.list th:not(.class1, .class2)
At the moment I try to create a small less mixin to add styles to placeholders.
The values are passed through an object. My solution now looks like this:
.placeholder(#rules){
&::-webkit-input-placeholder, &:-moz-placeholder,
&::-moz-placeholder,&:-ms-input-placeholder{
#rules();
}
}
I try to use this mixin like this:
input{
.placeholder({color:green})
}
So less generates:
input::-webkit-input-placeholder, input:-moz-placeholder,
input::-moz-placeholder, input:-ms-input-placeholder{
color: green;
}
The code evens has been generated like I want it, but the wished effect not entered. But when I cut the code and fill it in devtools it works.
Does anybody find a mistake. I don't get it
From css-tricks.com:
That would be nice, but the problem is that when a browser doesn’t understand a selector, it invalidates the entire line of selectors (except IE 7).
So you'll have to seperate the placeholder selectors:
.placeholder(#rules){
&::-webkit-input-placeholder{
#rules();
}
&:-moz-placeholder{
#rules();
}
&::-moz-placeholder{
#rules();
}
&:-ms-input-placeholder{
#rules();
}
}
I want to do something like this (Source - CSS Tricks Article):
#veinte { color/*\**/: blue\9; }
in Less for IE7 and IE8 but it gives errors.
The below works:
#diecinueve { color: blue\9; }
but there are some elements that I dont want to be called in IE9. e.g. I have something in IE9 with :before elements but because IE8 doesnt support it, I want to give it a padding only in IE8.
But this
#veinte { color/*\**/: blue\9; }
gives errors in Less. I tried this
#veinte { color~"/*\**/": blue\9; }
but that also doesnt work. Does anyone know how to do this in Less?
Property name interpolation is possible with Less v1.6.0 and above. Hence this hack can be implemented as shown below:
#hack: ~"/*\**/";
#veinte {
color#{hack}: blue\9;
}
Compiled CSS:
#veinte {
color/*\**/: blue\9;
}
Are you including Modernizr or another shiv script that adds classes directly to the HTML element?
Thus something like this:
.selector {
...rules...
.lte8 & {
... < IE9 styles ...
}
}
Might suit your needs. (see: nesting selectors, using the &)
Otherwise, since you're being hacky anyway, why not just reference a different .less compiled output sheet in a conditional comment?
You can try this one: background-position:~"-150px 0px\9" width:~"300px\9";
example:
.test{
width:~"300px\9";
}
I recently realized, when styling HTML5 input placeholder text, that this does not work:
:-moz-placeholder, ::-webkit-input-placeholder {
color:rgb(150,150,150);
}
But this does:
:-moz-placeholder {
color:rgb(150,150,150);
}
::-webkit-input-placeholder {
color:rgb(150,150,150);
}
Does anyone know why this is the case?
One of the :-vendor-... selector is not recognised, thus invalid. Rules containing invalid pseudo-selectors are ignored.
Have a look at this fiddle: http://jsfiddle.net/ue44U/2/
The #foo selector should match the element at the example, but since I've added :a-cow-says-moo to the selector set, the whole rule is ignored.
For example:
.foo { font-family: ; font-size: ; }
I'm seeing different behaviors in IE9 and Chrome. IE9 seems to use this to zero out those attributes (although, this behavior isn't being consistent across different pages for me at the moment).
In Chrome, it seems to simply ignore it.
What is the true expected behavior? Is that even valid CSS?
That is invalid CSS.
Browsers are supposed to ignore declarations without values (and only each declaration, not the entire block or everything after an invalid declaration). From the spec (irrelevant code examples omitted):
Malformed declarations. User agents must handle unexpected tokens encountered while parsing a declaration by reading until the end of the declaration, while observing the rules for matching pairs of (), [], {}, "", and '', and correctly handling escapes. For example, a malformed declaration may be missing a property, colon (:) or value. The following are all equivalent:
p { color:green }
p { color:green; color: } /* malformed declaration missing value */
p { color:red; color:; color:green } /* same with expected recovery */
Chrome is right. See: p { color:green; color: } here:
http://www.w3.org/TR/CSS2/syndata.html#parsing-errors