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

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 this post, I will lead you through 6 powerful CSS selectors that will really help you write clean CSS on your next project.

1. div > a

This selector will enable us to select all a element where the parent element is a div tag.

<!-- This one will be selected --> 
<div>
    <a></a>
</div>

<!-- This one will not be selected -->
<p>
    <a></a>
</p>

2. div + a

This one will select every a tag placed immediately after a div element. If we have an element between the div and the a tag, that element won't be selected.

<main>
<!-- This one will be selected -->
    <div></div>
    <a></a>
<!-- This one will be not selected -->
    <div></div>
    <p></p>
    <a></a>
</main>

3. div ~ a

This one will select every a tag preceded by a div element on the same level. In other words, if the a tag is not immediately preceded by a div element, but has a div tag as a sibling element, that element will be selected.

<main>
<!-- This one will be selected -->
    <div></div>
    <a></a>
<!-- This one will be selected -->
    <div></div>
    <p></p>
    <a></a>
    <section>
<!-- This one will be selected -->
    <div></div>
    <p></p>
    <a></a>
    </section>

    <footer>
<!-- This one will be not selected -->
    <p></p>
    <a></a>
    </footer>
</main>

4. [attribute^=value]

e.g: [class^="list-"]
This selector will pick every element that contains a class attribute and its value begins with list-

<main>
<!-- This one will be selected -->
    <div class="list-element"></div>
<!-- This one will be selected -->
    <div class="list-container"></div>
<!-- This one will be selected -->
    <div class="list-item"></div>
<!-- This one will be not selected -->
    <div class="list__footer"></div>
</main>

5. [attribute$=value]

e.g: [src$=".png"]
This one will select every src attribute where its value ends with .png.

<div>
<!-- This one will be selected -->
    <img src="image1.png">
<!-- This one will be not selected -->
    <img src="image2.jpg">
<!-- This one will be selected -->
    <img src="image3.png">
<!-- This one will be not selected -->
    <img src="image4.svg">
</div>

6. [attribute*=value]

e.g: [class*="-list"]
This selector will pick every element whose class attribute contains -list. It does not matter if -list is at the beginning, the middle or at the end of the class's value. The most important is that the value must contain -list.

<main>
<!-- This one will be selected -->
    <div class="main-list-container"></div>
<!-- This one will be selected -->
    <div class="primary-list"></div>
<!-- This one will be selected -->
    <div class="primary-list-item"></div>
<!-- This one will be not selected -->
    <div class="list-footer"></div>
</main>

Conclusion

Sometimes it's really tough to find the needed element to style due to the fact that our CSS file can be overkill very quick. And using this kind of selector can be very useful depending on your use-case.

TWITTER	BLOG	NEWSLETTER	GITHUB	LINKEDIN	CODEPEN	DEV

Comments

[Rafael Liendo]

Probably should tag this with #beginer

[Simon Landry]

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

[Michael Liendo]

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

[Ibrahima Ndaw]

I'll add the beginner tag. Thanks

[Roland Csibrei]

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]

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

[Ahmad Shahzad]

What about selecting an a before a div?

<a></a>
<div></div>

Is this possible?

[verdedev]

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]

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]

Very useful thank you

[Ibrahima Ndaw]

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

[Lucian2403]

Very useful tips. Thank you!

[Ibrahima Ndaw]

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

[bipan82gill]

Great job

[Ibrahima Ndaw]

Thanks for your comment.

[Nejc]

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

[Ibrahima Ndaw]

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

[Mostafa Hegazy]

Yes, it's common selectors but useful, thanks

[Ibrahima Ndaw]

Thanks a lot for your comment.

[jishnu chandran]

good

[Ibrahima Ndaw]

Thanks

[Syed Kashan Ali Shah]

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 😁

[Ibrahima Ndaw]

Thanks