Introduction:
In the world of CSS, readability and maintainability are crucial factors when it comes to writing clean and efficient code. Fortunately, CSS provides powerful pseudo-classes such as :is, :where, and :not, which can significantly improve the readability of your stylesheets. These pseudo-classes allow you to write concise and targeted selectors, making your code easier to understand and navigate. In this blog post, we will explore how leveraging the :is, :where, and :not pseudo-classes can enhance the readability of your CSS code, leading to more maintainable and efficient stylesheets. Let's dive in and unlock the potential of these powerful selectors!
Assuming you have a fundamental knowledge of what CSS pseudo classes are, let's begin.
:not() :
:not(<complex-selector-list>) {
/* styles */
}
The parameter for the :not() pseudo-class must be a list of one or more selectors separated by commas.
Consider the blow index.html :
<div class="card">
<h1>Heading</h1>
<p>Caption</p>
<p>Paragraph</p>
<button>Learn More</button>
</div>
Just assume for any reason you wanted to apply some common styles to all the elements except the button in the above code.
How will you respond? The straightforward solution is to override the button's styles, right?
This is where the ':not()' function comes into play, it will apply the styles to all but ignore the elements passed as a parameter to it.
.card > :not(button) {
color: teal;
margin-top: 3px;
letter-spacing: 0.8px;
}
Above styles will only be applied to all the direct children of .card except the button.
The amazing feature of this pseudo-class is that it allows for chaining: :not(x) y:not(z).
: is() and where() :
Basically is() and where() are similar and help in writing more clean and readable code.
:is(<complex-selector-list>) {
/* styles */
}
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.
<ol>
<li>Saturn</li>
<li>
<ul>
<li>Mimas</li>
<li>Enceladus</li>
<li>
<ol>
<li>Voyager</li>
<li>Cassini</li>
</ol>
</li>
<li>Tethys</li>
</ul>
</li>
<li>Uranus</li>
<li>
<ol>
<li>Titania</li>
<li>Oberon</li>
</ol>
</li>
</ol>
It might sound confusing, but once you see the "CSS," everything will make sense. Take the HTML code above, for example. Imagine that you wanted to change the style of the "ol" element, which is a child of the "ol" or "ul" element, and again, which is a child of the "ol" or "ul" element.
I was talking aboout the area highlited in red.
:is(ol, ul) :is(ol, ul) ol {
list-style-type: lower-greek;
color: chocolate;
}
Wow ! Do you think the CSS is now easier to read?
The sole distinction between is() and the where() pseudo-class is that where() lacks the specificity that is() possesses.
List of most commonly used pseudo-class :
-
:hover- Matches when an element is being hovered over by the mouse. -
:active- Matches when an element is being activated (clicked or pressed). -
:focus- Matches when an element has received focus (such as through keyboard navigation). -
:visited- Matches visited links. -
:first-child- Matches the first child element of its parent. -
:last-child- Matches the last child element of its parent. -
:nth-child()- Matches elements based on their position among siblings (e.g., :nth-child(2) selects the second child).
and the list goes on...
Conclusion:
In conclusion, by harnessing the power of CSS pseudo-classes like :is, :where, and :not, we can significantly improve the readability and maintainability of our code. These pseudo-classes provide us with flexible and targeted selectors that allow us to write concise and expressive stylesheets.
Top comments (2)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Thank you! I'm honored to be among the top posts.