thinkwithstyle

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.
Later edit: Google’s Chrome also does the job quite well – no surprise, being a Webkit browser, so it’s a Safari relative.
Anyway, I noticed that Chrome does not have support for embedded fonts. Safari allows you to use web fonts (truetype) but Chrome doesn’t.
Edited on 27.01.2009 – Firefox 3.1 HAS support for almost all selectors (except for for E:checked).

• 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 nly-child {color:red}Example 2 #selectdiv121 nly-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 nly-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 link to the target div 1
    • This is the link to the target div 2
    • This is the link to the target div 3

    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.

    Option1

    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

Posted in web development | RSS 2.0 | Trackback