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

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

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

10 thoughts on “Some cool CSS selectors’ addition in selectors level 4 – The future”

  1. 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.

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

    Via – LinkedIn

  3. 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.

  4. 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.”

  5. 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.

  6. 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.

  7. That parent selector is going to be so awesome! But there’s another thing that CSS desperately needs, a native .extend

  8. Can anyone tell what is the main use of :past ,:future and :current pseudo elements in css4.?
    And the exact Browser versions which support css4 selectors.?

    1. @Chandrakanth: First to clear, there is no CSS4. These are the advance level modules which is called CSS selectors level 4.

      :past, :future and :current pseudo elements are time-dimensional Pseudo-classes. It’s in the working draft stage. I don’t think for now, there is any browser support for these pseudo elements.

Leave a Reply

Your email address will not be published.