CSS is indispensable when we talk about web design and development. Basic selectors like classes (.) and IDs (#) might be familiar, but some advanced selectors can make your code efficient and elegant. Let’s explore 7 of these lesser-known yet incredibly powerful selectors.
1. Child Selector (>)
parent > child
This selector targets direct child elements of a specified parent, ignoring deeper nested elements.
ul > li {
color: blue;
}
This will style only the direct li children of ul, leaving nested li elements unaffected. Perfect for when you need precision and want to ensure styles don’t unintentionally cascade to nested elements. All modern browsers and as far back as IE7 support this feature.
2. Adjacent Sibling Selector (+)
element1 + element2
If you’ve ever needed to target an element immediately following another, the Adjacent Sibling Selector (+) is your go-to.
h2 + p {
margin-top: 10px;
}
This provides a 10px top margin to any paragraph immediately following an h2. Especially handy for managing spacing after specific elements.
3. Attribute Selector ([attr=value])
element[attr=value]
Matches elements based on their attribute and their value.
input[type="text"] {
border: 1px solid gray;
}
Styles all input fields of type text with a gray border. This is useful for styling specific form elements or elements with unique data attributes.
4. Pseudo-classes (:pseudo-class)
element:pseudo-class
This selector focuses on elements by their state, position, or other unique traits rather than their structure.
a:hover {
color: red;
}
Changes link color to red when hovered over. Enhance interactivity (like hover and focus states) and select elements based on position (like :first-child).
5. Not Selector (:not())
element:not(selector)
The Not Selector :not() excludes specific elements from being styled.
p:not(.special) {
font-weight: normal;
}
Styles all paragraphs without the class “special” to have a normal font-weight. This allows you to apply broad styles while exempting particular cases.
6. Universal Selector (*)
*
The Universal Selector * is a wildcard that matches every element on a webpage.
* {
box-sizing: border-box;
}
Assigns the box-sizing property to all elements, making layout calculations more intuitive. Useful for global styles or CSS resets.
7. Grouping Selector (,)
selector1, selector2, …
Last but not least, the Grouping Selector lets you apply the same styles to multiple elements.
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
Sets a consistent font across the three header levels. A time-saving approach when various elements share a set of styles.
Conclusion
CSS offers an incredible depth and flexibility that becomes more apparent as you explore its advanced selectors. You might not often use these selectors, but if you know how to use them, you can simplify your code and improve your style.
🖥️ Before you head back to your coding zone, consider these quick actions:
❤️ & 🦄 Show some love or sprinkle some unicorn magic on this article
💬 Curious or have insights? Drop your thoughts in the comments
🔄 Spread the word among our developer community
Your feedback is invaluable. It empowers me to craft even better tech content.
🌟 Thank you for being such a fantastic supporter! Every like, comment, and share shines a light on our tech community.
Top comments (21)
Nice post, but I'm not sure if "advanced" is really the right word here; some of these are definitely less common, but some others have been found in every beginner CSS tutorial for the last few decades.
Some more selectors that I'd consider "advanced" would for example be
:nth-child,:is(),:has(), etc.Thank you for taking the time to read and provide feedback on the article. I appreciate your insights!
You make a valid point about some of these selectors being part of beginner tutorials. My intention with the term "advanced" was to highlight selectors that go beyond the absolute basics like class and ID selectors, especially for readers who might just be diving a little deeper into CSS. However, I understand that "advanced" might feel like a stretch for some developers, especially those who have been in the field for a while.
I'm glad you brought up :is(), :has(), and :nth-child() (I believe you might've meant this instead of :next-child). Those are indeed fantastic selectors that offer more depth and targeting capabilities. I'll consider covering them in a follow-up piece, diving into even more nuanced aspects of CSS selectors.
Thank you again for your valuable feedback. Continuous learning and sharing are what make our developer community so vibrant, and I appreciate your contribution to that!
Yes, you're absolutely right about
:nth-child()😅 (I edited my comment to correct that)Making a follow-up post with another set of selectors sounds like a nice idea 👍 Depending on how advanced you wanna make it, there's also a lot of potential in combining all those selectors, specially now that
:is()and:has()are a thing.Thank you for the correction and the great suggestion! I absolutely agree — the power of CSS selectors, especially when combined, can achieve some truly intricate and effective stylings. :is() and :has() indeed open up a world of possibilities. Thanks again for being such an engaged reader! 👩💻🌟
Well done!
There are some more selectors if someone is interested, have a look at:
Thanks for sharing these additional resources! 🙌 Mozilla's documentation is indeed a gold mine for developers. I'll definitely check them out and encourage others to do the same. Cheers! 🚀
Great refresher! I sometimes have to go back to CSS code I did to remember how I managed to, for example, get the list style images to work as ticked checkboxes on all steps preceding the current focused one in a how-to guide. Turns out I used the ~ relative selector backwards!
Thank you! Ah, the joys of revisiting past code and discovering the clever tricks we once used. The ~ general sibling selector can be tricky but powerful when used correctly. Uncovering those "aha!" moments in our work is always fun. Keep up the creative coding! 👩💻🌟
Great post 💥✨
Thank you so much! 💙 I'm glad you found it helpful. Do you have a favorite CSS selector or any tips to share? Always love learning from the community!
Love using
:not()!:not - CSS : Feuilles de style en cascade | MDN
La pseudo-classe de négation, :not(), est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.
Ah, the :not() selector is indeed powerful! It's a great way to exclude specific elements and can make stylesheets so much cleaner. Thanks for sharing the MDN link and description. Happy coding! 🚀
thanks, great tips
Thank you for the kind words! I'm glad you found the tips useful. If you have any other CSS-related questions or topics you'd like covered, let me know. Happy coding! 🚀
Nice article, good for those who are starting out 👍.
Thank you so much! I'm glad you found it useful. Happy coding! 👩💻🚀
Good info. Thanks for sharing!
You're welcome! Glad you found it helpful. 😊
nice post
Thank you so much! I'm glad you found it useful. Happy coding! 👩💻🚀
🎨💡 Uncover the magic of CSS wizardry with "7 Advanced CSS Selectors You Should Know"! 🚀✨ This blog is a treasure trove for anyone passionate about web design and development. Elevate your styling game by delving into the secrets of these advanced selectors, carefully curated to empower your designs and create visually stunning websites.
Mastering these advanced CSS selectors is like adding a touch of finesse to your coding palette, allowing you to sculpt your web projects with precision and elegance. From sibling combinators to attribute selectors, this blog unveils the secrets that will set your CSS skills apart. Enhance your understanding, streamline your coding process, and bring your visions to life in the digital realm.
Don't miss out on this enlightening read – level up your CSS expertise and transform the way you craft web experiences. Get ready to shape the future of web design! 🌟🔥
However, You can find more information about Advanced CSS selector from the website given.