Hey everyone! Welcome to my blog. 👋
Introduction
Today, we're diving into the world of advanced CSS selectors. These selectors, like :i...
For further actions, you may consider blocking this person and/or reporting abuse
I knew about
:not, but:hasis interesting, didn't know about that one!I'm a bit puzzled by
:isand:where, because to me it seems that simple standard selectors (without:isor:where) work almost the same ... probably some subtlety that I'm missing? ;-)They're basically the same, functionally. The only difference is specificity, as Eleftheria said: the selectors that you put into
:where()do not contribute to the specificity of the selector, whereas what you put into:is()does.Thanks for the clarification!
Awesome article as always, Eleftheria! 💯
Thank you!
Thank you for sharing such an amazing and practical article! The explanations and examples are super clear and helpful. I’ve shared this post on my LinkedIn so others can benefit from it too. 🙌🌟
linkedin.com/feed/update/urn:li:ac...
Thank you so much for sharing it! 😊
In this example:
:is(.alert.success, .alert.error, .alert.warning) {
font-weight: bold;
border: 1px solid;
border-radius: 4px;
}
Wouldn't this as written work the same without the :is() ?
Should it have read :is(alert) without the other classes?
Also the reference to :has being limited to recent versions of Safari seems well out of date as of the posting date, as it's in all the major browsers now?
I agree. In fact, you can write the same rule by simply using the
.alertclass since all of them have it. I also agree about:has. All major browsers now have full support for it.Thank you for this note!
In fact this snippet can be refactored like this:
.alert:is(.success, .error, .warning) {font-weight: bold;
border: 1px solid;
border-radius: 4px;
}
You can combine :is and :not.
You can also combine :not with older selectors like nth-child, last-of-type etc
Within the context of this article nothing mentioned about joint use of each selector
🤓👌
Amazing! Thanks for sharing :)
My pleasure! Thanks for reading.