css3 selectors test

Robert — Wed, 25 Jun 2008 11:52:50 +0000

CSS3 selectors tests. More than half of the following selectors don’t work in Firefox 2.0 AND 3.0 (yes, Firefox 3.0 still hasn’t good support for CSS3), Opera 9.01 and IE7. All of them work fine in Opera 9.5 and Safari 3.0 (Win). ~~However, I prepared them only up to #15, the rest has to wait a couple of days.~~

Attribute selectors
- E[foo^="bar"]
  
  an E element whose “foo” attribute value begins exactly with the string “bar”.
  
  Example #selectdiv1 p[class^="bar"] {color:red}
  
  p.barstring - This paragraph should be colored in red, because it’s class attribute starts with ‘bar’.
  
  p.stringbarstring - This paragraph should be unstyled, although it’s class contains the word ‘bar’, but it does not start with it.
- E[foo*="bar"]
  
  an E element whose “foo” attribute value contains the substring “bar”.
  
  Example #selectdiv2 p[class*="bar"] {color:red}
  
  p.barstring- This paragraph should be colored in red, because it’s class attribute contains ‘bar’.
  
  p.stringbarstring-This paragraph should be also colored in red, because it’s class attribute contains ‘bar’.
  
  p.string - This paragraph should be unstyled
- E[foo$="bar"]
  
  an E element whose “foo” attribute value ends exactly with the string “bar”.
  
  Example #selectdiv3 p[class$="bar"] {color:red}
  
  p.stringbar - This paragraph should be also colored in red, because it’s class ends with ‘bar’.
  
  p.barstring- This paragraph should be unstyled.
  
  p.string - This paragraph should be unstyled
Pseudo-classes:
- E:root
  
  an E element, root of the document.
  
  Example html:root #selectdiv4 p:first-child{color:red}
  
  GOTCHA! In html the root element is itself. To show this selector in action, I had to declare html:root #selectdiv4 p:first-child{color:red}. And this paragraph should be red. Not in IE7, it doesn’t do it.
  
  This paragraph is unstyled, it is black (or grey, whatever).
- E:nth-child(n)
  
  an E element, the n-th child of its parent.
  
  Example #selectdiv5 p:nth-child(2n){color:green} #selectdiv5 p:nth-child(2n+1){color:red}
  
  This paragraph should be red.
  
  This paragraph should be green.
  
  This paragraph should be red
  
  This paragraph should be green.
  
  This paragraph should be red.
  
  This paragraph should be green.
  
  This paragraph should be red.
  
  This paragraph should be green.
  
  This paragraph should be red. Not for IE7 and Firefox 2.
- E:nth-last-child(n)
  
  an E element, the n-th child of its parent, counting from the last one.
  
  Example #selectdiv6 p:nth-last-child(2n){color:green} #selectdiv6 p:nth-last-child(2n+1){color:red}
  
  This paragraph should be red.
  
  This paragraph should be green.
  
  This paragraph should be red
  
  This paragraph should be green.
  
  This paragraph should be red.
  
  This paragraph should be green.
  
  This paragraph should be red.
  
  This paragraph should be green.
  
  This paragraph should be red. Not for IE7 and Firefox 2
- E:nth-of-type(n)
  
  an E element, the n-th sibling of its type.
  
  Example #selectdiv7 p:nth-of-type(3) {color:red} #selectdiv7 p:nth-of-type(2n+1) {font-weight:bold}
  
  This paragraph should be bold.
  
  This paragraph should be unstyled.
  
  This is a div and should not be affected by the rule, because it’s not a paragraph.
  
  This paragraph should be red and bold.
  
  This paragraph should be unstyled.
- E:nth-last-of-type(n)
  
  an E element, the n-th sibling of its type, counting from the last one.
  
  Example #selectdiv8 p:nth-last-of-type(1) {color:red} #selectdiv8 p:nth-last-of-type(3) {font-weight:bold}
  
  This paragraph should be unstyled.
  
  This paragraph should be bold.
  
  This is a div and should not be affected by the rule.
  
  This paragraph should be unstyled.
  
  This paragraph should be red.
- E:last-child
  
  an E element, last child of its parent
  
  Example #selectdiv9 p:last-child {color:red}
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
  
  This paragraph should be red, because it’s the last child of it’s type.
- E:first-of-type
  
  an E element, first sibling of its type
  
  Example #selectdiv10 p:first-of-type {color:red}
  
  This is a div and should not be affected by the rule, because it’s not a paragraph.
  
  This paragraph should be red.
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
- E:last-of-type
  
  an E element, last sibling of its type
  
  Example #selectdiv11 p:last-of-type {color:red}
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
  
  This paragraph should be unstyled.
  
  This paragraph should be red.
  
  This is a div and should not be affected by the rule, because it’s not a paragraph.
- E:only-child
  
  an E element, only child of its parent
  
  Example 1 #selectdiv12 :only-child {color:red}Example 2 #selectdiv121 :only-child {color:red}
  
  This paragraph should be red, because is the only child of the outer div.
  
  This paragraph should be unstyled, because there are more children of the outer div.
  
  This is a div
- E:only-of-type
  
  an E element, only sibling of its type
  
  Example 1 #selectdiv13 p:only-of-type {color:red}Example 2 #selectdiv131 :only-of-type {color:red}
  
  This paragraph should be red because it’s the only child of it’s type.
  
  This is a div.
  
  This paragraph should be unstyled, because there are several children of it’s type in the outer div.
  
  This paragraph should be unstyled, because there are several children of it’s type in the outer div.
  
  But this div should be red, because it’s teh only child of it’s type.
- E:empty
  
  an E element that has no children (including text nodes)
  
  Example#selectdiv14 p:empty {padding:50px 0}
  
  This paragraph should be unstyled, because it’s not empty - text nodes count, including whitespaces.
  
  If above is a huge blank space, it means that the declaration works. Above is an empty paragraph containing a comment and nothing else.
- E:target
  
  an E element being the target of the referring URI
  
  Example #selectdiv15 :target {background:#fc3}
  This is the target div 1
  
  This is the target div 2
  
  This is the target div 3
- E:enabled, E:disabled
  
  a user interface element E which is enabled or disabled
  
  Example #selectdiv16 :enabled {border:1px solid red} #selectdiv16 :disabled {border:1px solid blue}
  
  An input which should have a red border Inputs are enabled by default.
  
  An input with blue border because it was disabled.
  
  A select box with blue border because it was disabled.
- E:checked
  
  a user interface element E which is checked (for instance a radio-button or checkbox)
  
  Example #selectdiv17 input:checked {border:1px solid red}
  
  This is a radiobutton which should have a red border, because it has checked=”checked”.
  
  This is a checkbox and whould have red border only when it’s checked
  
  This is a text input and should not have red border even if it has checked=”checked”, because attribute “checked” is not meant for this type of inputs.
- E:not(s)
  
  an E element that does not match simple selector s
  
  Example #selectdiv19 :not(.some_class) {color:red}
  
  This paragraph should be red, because it does not have class=”some_class”
  
  This paragraph should be unstyled, bacause it has class=”some_class”.
  
  This paragraph should be unstyled, bacause it has class=”some_class”.
  
  This heading h3 should be red, because it does not have class=”some_class”
  
  This heading h3 should be unstyled, because it does have class=”some_class”
General sibling combinator:
- E ~ F
  
  an F element preceded by an E element
  
  Example 1 #selectdiv20 h3 ~ p {color:red}
  Example 2 #selectdiv20 h3.blue ~ p {color:blue}
  
  This paragraph should be unstyled, because no heading h3 comes before it.
  
  This is a h3 heading
  
  This paragraph should be red because it is next and adjiacent to a heading h3.
  
  This paragraph should be red because it comes after a heading h3.
  
  This paragraph should be red because it comes after a heading h3
  
  This paragraph should be unstyled, because no heading h3 comes before it.
  
  This is a h3 heading
  
  This paragraph should be red because it is next and adjiacent to a heading h3.
  
  This paragraph should be red because it comes after a heading h3.
  
  This is a h3 heading class=”blue”
  
  This paragraph should be blue because it comes after a heading h3.blue
  
  This paragraph should be blue because it comes after a heading h3.blue

thinkwithstyle

css3 selectors test

Attribute selectors

Pseudo-classes:

This heading h3 should be red, because it does not have class=”some_class”

This heading h3 should be unstyled, because it does have class=”some_class”

General sibling combinator:

This is a h3 heading

This is a h3 heading

This is a h3 heading class=”blue”