Some cool CSS selectors’ addition in selectors level 4 – The future

June 27th, 2013

CSS selector level 4 image - realityonweb.com The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as “Selectors level 4″. Selectors have been with us since the beginning of CSS. Most awaited selector of level 4 is; Parent Selector of a given element. This advance selector will offer the possibility to target parent of any element without javaScript. There are many such new cool selectors in this level that make website management easier.

Selectors level 4 specification is an evolving draft, not yet an official standard. You can’t rely on draft document as it may change in the future.

Parent selector

There was no way to select the parent container in CSS but in the W3C draft of selectors level 4, parent selector has been introduced. You can select element other than the last one. Now, it’s easy to style the fieldset on the focus of an input element.

Any syntax of CSS selectors level 4 mentioned here, could be changed. It’s only a draft. Like “$” symbol before the selector [$fieldset], it was proposed in the first draft which got changed to “!” exclamation mark after the selector [fieldset!]

Logical combinator – :matches, :not

It takes the selectors list as an argument and apply the styles.

Location pseudo-classes- :any-link, :local-link

This controls the styling of link more smartly, any-link combine the a:link and a:visited link into one. And using local-link, you can get a different link style of any specific page or based on the domain.

Grid-structural pseudo classes – :column, :nth-column, :nth-last-column

Applying style to a column in a grid will be possible in CSS selector level 4. Imagine a grid with different plan options and a specific column (plan) need to be highlighted.

If there is not sufficient implementer interest, some features may be dropped during the CR period

Conclusion

Addition of these cool selectors is really mouth-watering but It will take some time to standardize these specifications. At least we will have to wait till the browser vendors start implementing these features. This speedy evolution of the web making it more interesting and dynamic.

Some good resources

7 Comments

June 29th, 2013

I had to read this, thx for putting it together. I agree, some mouth-watering things to come. With CSS3 and HTML5 you can do more without requiring JS, etc … such as animations, graphics. With these selectors getting cleverer and having more options to traverse/filter out a dom, it’s exciting man.

Martin Rinehart
July 2nd, 2013

Selectors 4 is here: http://dev.w3.org/csswg/selectors4/

We may be using LESS/SASS for a while, yet. From the spec: “This module is a somewhat-unstable Working Draft. If you are looking for a stable Selectors specification, use Selectors 3.”

Via LinkedIn

Mike Wilcox
July 2nd, 2013

The parent selector is huge. There were performance issues which kept the from implementing it earlier – I guess they figured it out.

Via – LinkedIn

Charlie Williams
February 11th, 2014

I like the ““If there is not sufficient implementer interest, some features may be dropped during the CR period”
Why would anyone not want those 4 features to be implemented? Parent selector would be fantastic, especially on CMSs.

Christian Ziebarth
February 11th, 2014

There’s a weird conundrum that occurs in the overall world of web development where browsers will implement a feature on a test basis and say, “We’ll remove it if nobody uses it,” and developers say, “We can’t use it because nobody uses it.”

Michael Coleman
March 10th, 2014

Very nice! Love the selecting of parent elements. I wish they would throw in some mix-ins to help bridge the gaps a bit between processed CSS and pure CSS. Even variables would be nice.

But I wonder how many different ways IE will mess this up for everyone.

Theresa Barisonek Hoskins
May 14th, 2014

Speaking of IE messing things up,as the numbers of IE users continually decreases and Chrome climbs, how meticulous are your development hacks for IE 9 and below? Yes, there are still those users out there.

Leave a Reply

*