I have seen a line of code in CSS looks like this:
[icon]:not([focused]):not([pressed]):not([disabled]){ background-position-y:-0px; }
What is the meaning of the multiple colons in this case? Are they still Pseudo selectors?
Asked
Active
Viewed 457 times
2
Cœur
- 37,241
- 25
- 195
- 267
user1655072
- 572
- 2
- 10
- 20
-
2@j08691, technically it is regular CSS except for `background-position-y`, which is nonstandard (proposed and implemented in some browsers, but not in any spec or draft). While e.g. `icon` is not a valid HTML attribute, CSS is not limited to styling valid HTML. – Jukka K. Korpela Nov 17 '12 at 23:25
1 Answers
3
It's not pseudo-selectors - it's selectors for pseudo-classes. Quoting the W3C Selectors Level 3 doc:
6.6.7. The negation pseudo-class The negation pseudo-class,
:not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument. [...]The following selector matches all button elements in an HTML document that are not disabled.
button:not([DISABLED])The following group of selectors represents all HTML elements except links.
html|*:not(:link):not(:visited)
The last example (as well as this answer) shows that it's quite valid to use a chain of several :not pseudo-class selectors, if what you want is setting a rule for some element that is not either of several mentioned types.
In your case the selector catches all the elements with icon attribute set (to any value) - except those that have either focused, pressed or disabled set (again, to any value) as well.
