- Is CSS3 Obsolete Already?
- What are Selectors?
- Logical Combinations: :MATCHES and :NOT
- Location Based Pseudo-classes :ANY-LINK and :LOCAL-LINK
- Three-Dimension Pseudo-Classes: :CURRENT, :PAST and :FUTURE
- Grid-Structural Pseudo-classes: :COLUMN, :NTH-COLUMN and :NTH-LAST-COLUMN
- Parent Selector
- Conclusion
- Frequently Asked Questions about CSS Selectors Level 4
Recently I had published an article on SitePoint showcasing different examples of the use of CSS3 2D and 3D transform. CSS3 excites us so much, you could be forgiven for thinking this is the most advanced version of CSS available. Not so. Even now, just as you are still learning to use CSS3 and HTML5, those talented folks at W3C have released a working draft of the Level 4 standards of CSS Selectors, creating a buzz that CSS4 is near.
Is CSS3 Obsolete Already?
Absolutely not! We have a lot to do before CSS3 is even in wide use and fully supported. The web is, however, in a constant state of progressive transformation. Selectors Level 4 is an editor’s draft released on January 16. It is intended for discussion only and should be regarded as a work in progress. Note also that Level 4 of Selectors being under discussion does not equate to Version 4 of CSS being released. What it does show us is various newer ways of using selectors in stylesheets. That these developments have reached Level 4 reveals some of what is likely to be included in CSS4. So we’re looking at a path toward CSS4, with a very long way to go. In this article, I will try to highlight some of the most inetresting and potentially significant ways in which Level 4 Selectors might be used.What are Selectors?
Selectors are pattern matching conditions in a tree structure of HTML. We’ve been using selectors since Level 1 of CSS. A selector can range from simple element names to complex representations. The level 4 document on selectors mostly comprises of pseudo-classes to add effects to them. It documents some cool and interesting features which I will explain.Basic Examples of Selectors:
h1{ font-family: arial; } /* Element matching selector for matching heading1 statements */
a{ text-decoration: underline; } /* Element matching selector for hyperlinks in the documents */
h1, h2, h3{ font-color: blue; } /* combination of selectors */
Logical Combinations: :MATCHES and :NOT
Like Mozilla’s:-moz-any()
pseudo-class, CSS finally has its own matching pseudo-class, :matches
. Using :matches
you can group and select elements. It is a functional pseudo-class which takes a selector’s list as an argument. In the level 4 selectors, you can only include compound selectors as the argument in :matches
. Combinators like white spaces, greater than symbol, etc are not valid arguments.
You cannot even nest :matches
within itself or within :not
pseudo-class like :matches(:matches(…))
or :not(:matches())
. These are invalid uses of :matches
in the new specifications.
Instead of:
a:link, a:hover, a:visited, a:focus{
color:red;
}
You can use:
a:matches(:link, :hover, :visited, :focus){
color:red;
}
Though this looks simple, you can use it in various complicated ways when you have more elements to group like:
div:matches(.active, .visible, #main){
background: blue;
}
Let’s see how to use the second logical combinator :not
. It is a negation pseudo-class which takes a list of other selectors as arguments. Sometime we have more elements to apply a specific style and to leave out few elements in the list. You can use :not
in such cases and pass the list of selectors you don’t want to apply a specific style.
h1:not(#title, .active){
color: #F2F2F2;
}
The above code will give all h1
elements that are not #title
and .active
a color code #F2F2F2
. Interesting isn’t?
Location Based Pseudo-classes :ANY-LINK and :LOCAL-LINK
Location based pseudo-classes gives you more power to design link elements. The Level 4 document states that this is a temporary name given and it may change in future. It represents any element that is a source anchor of hyperlink. It combinesa:visited
and a:lin
k into one so you don’t have to write it twice.
For example:
a:link, a:visited{
color: blue;
}
Can be re-written as:
a:any-link{
color:blue;
}
The above code will color all the link elements blue whether they have been visited or not.
Another very interesting feature added in this document is :local-link
. Using this you can apply styles those links which point to the current document. This will help web designers to give a different look to those links which are local and don’t open any different web page.
a:local-link{
color: green;
}
You can also match the level of local link url using parameters in the :local-link
. For example:
a:local-link(0){
color: #888888;
}
a:local-link(1){
color: green;
}
a:local-link(2){
color: blue;
}
Let me explain you more clearly with the help of a sample link: https://www.sitepoint.com/tag/css/
- Link https://www.sitepoint.com will be colored #888888 according to above style.
- Link https://www.sitepoint.com/tag/ will be colored green and
- Link https://www.sitepoint.com/tag/css/ will be colored blue.
Three-Dimension Pseudo-Classes: :CURRENT, :PAST and :FUTURE
These pseudo classes give three dimensional effects to the text in webpages. You can use it to highlight the portion of the webpages currently being read in a speech. For example::current(p, li, dt, dd) {
background: yellow;
}
The :past
pseudo-class represent text portion prior to :current
portion and :future
pseudo-class represent the next portion. Highlighting and blurring text using these pseudo-classes will give readers a comfortable view of the document.
Grid-Structural Pseudo-classes: :COLUMN, :NTH-COLUMN and :NTH-LAST-COLUMN
Column based designing was already introduced in CSS3 but designing each column of a webpage was difficult. With the introduction of grid-structural pseudo-classes, designers will surely find it easier to give different styles to different columns of a document. For example::column(.full){
background: #F2F2F2;
}
.nth-column(odd){
color: #999999;
}
In the above code, the background of all the columns of .full
will be changed to #F2F2F2
and odd columns will have color code #999999
.
Parent Selector
I believe this is the most important addition to the list of all new selectors. Designers had been complaining about lost focus of the parent element when the child element is active. It was impossible to apply dynamic styles to the parent element when the child had a focus. For example, in case of designing a drop down menu when the focus was on the lowest levelli
element, the main parent li
element always lost its focus. In ul li a.active
the focus was on the link element instead of li
. With the help of parent selector, you can now tell the browser that you want to apply style to the li
instead of a
. Let us check out a working example.
ul li! a.active {
color: red;
}
The li
element was made red in color instead of a:activ
e in the above code.
body! header a:hover {
background: red;
}
The body was given style instead of the link element in the above snippet.
Conclusion
Now that we have seen the new level of the Selectors in CSS, I am personally very eager to use them in my projects. However, we will all have to wait some time before they are implemented in our browsers. Selectors have been the most important members of the CSS family. Now with introduction of Level 4 document they have proved their importance once again. For details of all the changes, you can go to the full documentation in the W3C website for more reference.Frequently Asked Questions about CSS Selectors Level 4
What are the new features in CSS Selectors Level 4?
CSS Selectors Level 4 introduces several new features that enhance the capabilities of CSS. These include the :matches() pseudo-class, which allows for more complex matching patterns; the :not() pseudo-class, which now accepts a list of selectors; the :has() pseudo-class, which allows for parent selectors; and the :nth-child() and :nth-last-child() pseudo-classes, which now accept an “of S” clause to filter the children to count. Additionally, there are new combinators like the relational and column combinator, and new pseudo-elements like ::spelling-error and ::grammar-error.
How does the :matches() pseudo-class work in CSS Selectors Level 4?
The :matches() pseudo-class in CSS Selectors Level 4 allows for more complex matching patterns. It accepts a list of selectors and matches if any of the selectors in the list match. This can simplify your CSS and make it more readable. For example, instead of writing “h1.title, h2.title, h3.title { color: blue; }”, you can write “:matches(h1, h2, h3).title { color: blue; }”.
What is the :has() pseudo-class in CSS Selectors Level 4?
The :has() pseudo-class in CSS Selectors Level 4 is a powerful new feature that allows for parent selectors. It matches if the element has a descendant that matches the given selector. For example, “div:has(p)” matches any div that contains a p element. This was not possible in previous levels of CSS.
How do the new combinators in CSS Selectors Level 4 work?
CSS Selectors Level 4 introduces new combinators that provide more flexibility in selecting elements. The relational combinator ‘>>’ matches an element that is a descendant of another element, similar to the space combinator but with higher specificity. The column combinator ‘||’ matches an element that is a cell of a grid or table column.
What are the new pseudo-elements in CSS Selectors Level 4?
CSS Selectors Level 4 introduces new pseudo-elements that allow for more precise styling. The ::spelling-error pseudo-element matches a segment of text that has been marked as a spelling error, and the ::grammar-error pseudo-element matches a segment of text that has been marked as a grammar error. These can be used to customize the appearance of spelling and grammar errors in a document.
How does the “of S” clause work in the :nth-child() and :nth-last-child() pseudo-classes?
The “of S” clause in the :nth-child() and :nth-last-child() pseudo-classes in CSS Selectors Level 4 allows you to filter the children to count. For example, “:nth-child(2 of .item)” matches the second child that has the class “item”, not the second child overall.
What is the :not() pseudo-class in CSS Selectors Level 4?
The :not() pseudo-class in CSS Selectors Level 4 has been enhanced to accept a list of selectors. It matches if the element does not match any of the selectors in the list. This allows for more complex exclusion patterns.
How does specificity work in CSS Selectors Level 4?
Specificity in CSS Selectors Level 4 works similarly to previous levels, but with some enhancements. The new relational combinator ‘>>’ has higher specificity than the space combinator. The :not() pseudo-class does not add to the specificity, but the selectors inside it do.
Are CSS Selectors Level 4 supported in all browsers?
As of now, not all features of CSS Selectors Level 4 are supported in all browsers. You can check the current level of support on websites like Can I Use.
When will CSS Selectors Level 4 become an official standard?
CSS Selectors Level 4 is currently a working draft at the W3C, and it is not known when it will become an official standard. However, many of its features are already implemented in browsers and can be used today.
![Syed Fazle Rahman](https://uploads.sitepoint.com/wp-content/uploads/2014/05/1401561586936411_562636140454299_205160908_n-1-Edited-Edited-96x96.jpg)
Web Designer with over 6 years of experience, including user experience and front end development. Currently, CEO and Co-Founder of Hashnode, a network of software developers. Has published two books: Jump Start Bootstrap and Jump Start Foundation for SitePoint Premium.