DEV Community

6 powerful CSS selectors that will really help you write clean CSS.

Ibrahima Ndaw on December 12, 2019

Originally posted on my blog Selectors in CSS are used to pick elements and style them. They can be very powerful following which one we use. In...

Read full post

Rafael Liendo • Dec 12 '19

Probably should tag this with #beginer

Simon Landry • Dec 13 '19

Yeah I also thought I was about to learn something new ;/

Michael Liendo • Dec 13 '19

Not sure. The regex-like selectors are often times forgotten.

Ibrahima Ndaw • Dec 16 '19

I'll add the beginner tag. Thanks

Roland Csibrei • Dec 13 '19

Yes, should be tagged as beginner, however it is good from time to time to refresh our knowledge and this was a perfect opportunity. Thanks a lot! Have a great day! R.

Ibrahima Ndaw • Dec 16 '19

I'll add the beginner tag and thanks for your comment and have a great day too.

Ahmad Shahzad • Dec 13 '19 • Edited

What about selecting an a before a div?

Is this possible?

verdedev • Dec 13 '19

What you're describing is a "previous sibling" selector and it doesn't exist in CSS. Another popularly desired selector that doesn't exist is a "parent selector." While they both can be implemented in JavaScript pretty easily, the spec-writing gods of CSS, and the algorithm writers who implement those specifications have their reasons for denying us these things.

Nicholas Stimpson • Dec 14 '19 • Edited

The reasons come down to performance. We can see this from a couple of snippets from the Selectors Level 4 spec, where it discusses the Live and snapshot profiles

Selectors are used in many different contexts, with wildly varying performance characteristics. Some powerful selectors are unfortunately too slow to realistically include in the more performance-sensitive contexts.

ISSUE 1 - The categorization of things into the “live” or snapshot profiles needs implementor review. If some things currently not in the live profile can reasonably be done in CSS Selectors, we should move them.

In this particular case <a> before <div> could be done using the has() pseudo-class as a:has(+ div) or a:has(~ div), but has() is only part of the snapshot profile and therefore not for implementation in CSS.

Aimad Ghssisse • Dec 13 '19

Very useful thank you

Ibrahima Ndaw • Dec 16 '19

I'm glad that you find it useful, Thanks for your comment.

Lucian2403 • Dec 13 '19

Very useful tips. Thank you!

Ibrahima Ndaw • Dec 16 '19

I'm glad that you find it useful, Thanks for your comment.

bipan82gill • Dec 13 '19

Great job

Ibrahima Ndaw • Dec 16 '19

Thanks for your comment.

Nejc • Dec 13 '19

Some of these are really helpful and easy to understand, thanks

Ibrahima Ndaw • Dec 16 '19

I'm glad that you find it useful, Thanks for your comment.

Mostafa Hegazy • Dec 13 '19

Yes, it's common selectors but useful, thanks

Ibrahima Ndaw • Dec 16 '19

Thanks a lot for your comment.

jishnu chandran • Dec 13 '19

good

Ibrahima Ndaw • Dec 16 '19

Thanks

Syed Kashan Ali Shah • Dec 13 '19

No matter this would help in writing clean code or not, but thanks for a quick recall to some of the unconventional selectors, which may surely help to style some typically written html 😁