What’s new in CSS Selectors Level 4

The latest CSS Selectors Level 4 Working Draft was released on 29 September 2011. Lots of new and exciting additions in the Level 4 draft. Below is a walk-through of the new stuff in Selectors Level 4.

1. Compound Selector
There is now support for compound selector for negation and matches-any pseudo-class. Compound Selector allows us to select elements by group.

Pattern Meaning Section
E:not(s1, s2) an E element that does not match either compound selector s1 or compound selector s2 Negation pseudo-class
E:matches(s1, s2) an E element that matches compound selector s1 and/or compound selector s2 Matches-any pseudo-class

In the below example. the first two list items will be red, and the rest will be green.

  • hullo
  • hullo
  • hullo
  • hullo
  • hullo

2. The local link pseudo-class
The :local-link pseudo-class allows authors to style links based on the users current location within a site.

Pattern Meaning Section
E:local-link an E element being the source anchor of a hyperlink of which the target is the current document The local link pseudo-class
E:local-link(0) an E element being the source anchor of a hyperlink of which the target is within the current domain The local link pseudo-class

If the page URL is http://www.example.com/2011/03/, Link 1 would receive Style 2. Link 2 would receive Styles 2 and 3.


3. ‘:nth-match()’ pseudo-class
The :nth-match(an+b of selector-list) pseudo-class notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of n.

Pattern Meaning Section
E:nth-match(n of selector) an E element, the n-th sibling matching selector Structural pseudo-classes

4. Grid-Structural pseudo-classes
Grid-Structural Selectors is used for 2D grid like tables. Below are the patterns:

Pattern Meaning Section
E:column(selector) an E element that represents a cell in a grid/table belonging to a column represented by an element that matches selector Grid-Structural pseudo-classes
E:nth-column(n) an E element that represents a cell belonging to the nth column in a grid/table Grid-Structural pseudo-classes
E:nth-last-column(n) an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one Grid-Structural pseudo-classes

The following example makes cells C, E, and G yellow.


5. Reference combinator

Pattern Meaning Section
E /foo/ F an F element ID-referenced by an E element’s foo attribute Reference combinator

6. Determining the subject of a selector
We are all familiar with the pattern E > F (CSS Selectors Level 2) which represents an F element child of an E element. There is also a way to do it another way around.

Pattern Meaning Section
$E > F an E element parent of an F element Determining the subject of a selector + Child combinator

So by using $E > F, we could select element E as the subject.



7. Time-dimensional Pseudo-classes
Time-dimensional Pseudo-classes is a newly introduced set of classes that classify elements with respect to the currently-displayed or active position in a time-dimensional canvas, such as during speech rendering of an HTML document.

Pattern Meaning Section
E:current an E element that is currently presented in a time-dimensional canvas Time-dimensional Pseudo-classes
E:current(s) an E element that is the deepest :current element that matches selector s Time-dimensional Pseudo-classes
E:past an E element that is in the past in a time-dimensional canvas Time-dimensional Pseudo-classes
E:future an E element that is in the future in a time-dimensional canvas Time-dimensional Pseudo-classes

For example, the following rule will highlight whichever paragraph or list item is being read aloud in a speech rendering of the document:

8. The indeterminate-value pseudo-class ‘:indeterminate’
The :indeterminate pseudo-class applies to UI elements whose value is in an indeterminate state. For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly a progress meter can be in an indeterminate state when the percent completion is unknown.
Like the :checked pseudo-class, :indeterminate applies to all media. Components of a radio-group initialized with no pre-selected choice, for example, would be :indeterminate even in a static display.

Pattern Meaning Section
E:indeterminate a user interface element E that is in an indeterminate state (neither checked nor unchecked) The indeterminate-value pseudo-class

9. Attribute selectors: Case-sensitivity
The attribute selector may include the identifier i immediately inside the closing bracket (]). When this flag is present, UAs must match the attribute’s value case-insensitively within the ASCII range.

Pattern Meaning Section
E[foo=”bar” i] an E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of bar Attribute selectors: Case-sensitivity

An example will be:

10. CSS3UI
There are also some Level 4 selectors (noted as “3-UI”) were introduced in [CSS3UI]. You can learn more about them at:
The default option pseudo-class :default
The validity pseudo-classes
The optionality pseudo-classes
The mutability pseudo-classes

There are still errors, debate and incomplete information in the draft, if you would like to join the discussion, there is a public mailing list at www-style@w3.org. The latest spec is at: http://www.w3.org/TR/2011/WD-selectors4-20110929/

Be Sociable, Share!

About Shi Chuan

I am a web developer.
This entry was posted in CSS and tagged . Bookmark the permalink.

20 Responses to What’s new in CSS Selectors Level 4

  1. Pingback: xhtml css templates – What's new in CSS Selectors Level 4 | Shi Chuan's blog | XHTML CSS - Style sheet and html programming tutorial and guides

  2. Pingback: Elegant D » What's new in CSS Selectors Level 4 | Shi Chuan's blog

  3. Vjeux says:

    7. Time-dimensional Pseudo-classes

    The table is displaying :not and :matches. It’s probably an error :)

  4. Shi Chuan says:

    @Vjeux: thanks for pointing it out, corrected :)

  5. thanks for sharing with us very helpful

  6. Very helpfull, thanks for sharing. Now i’m thinking about usage in my projects.

  7. Good stuff, thanks! Might want to clarify that E:not(S) is in level 3, but was only for simple selectors.

  8. Roger says:

    I’m actually a little stunned that an article about css would have a PNG headline.

    Otherwise, interesting. I’m going to try this on some web pages.

  9. Pingback: Meine Lesezeichen vom 4 Oktober bis 19 Oktober : Casa Rock!

  10. Pingback: Linkfutter 7 « F-LOG-GE

  11. FYI, The real “latest draft” is always at [1]. Not sure if a draft is a spec in your definition. ;) See also
    [2] for all the CSS drafts.

    [1] http://dev.w3.org/csswg/selectors4/
    [2] http://dev.w3.org/csswg/

  12. Pingback: IE sub 50%, hard disk-uri mai scumpe, CSS3&4

  13. Pingback: » 针对webkit的HTML, CSS和Javascript xfsh

  14. Pingback: . « مش لائى

  15. Rob Colburn says:

    It’s all really nice that these have come along now, for all the things we wish we could have done, but had to learn around. I do fear reading the stylesheets of the future though.

  16. Pingback: 针对webkit的HTML, CSS和Javascript | ued资源分享站

  17. Pingback: 移动端 html经常用到的一些html 和css (转)

  18. Pingback: 移动端 html经常用到的一些html 和css (转) | broxten

  19. For latest information you have to visit world-wide-web and on world-wide-web I
    found this web page as a most excellent web page for
    latest updates.

  20. Do you have a spam issue onn this website; I also
    am a blogger, and I was wondering your situation; wee have created some nice practices and
    we are looking to swap methods with other folks, be sure to shoot me an e-mail if

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>