3
Day 16: the specificity of :has()
source link: https://www.matuzo.at/blog/2022/100daysof-day16/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Day 16: the specificity of :has()
posted on October 17., 2022
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
Just like with :is() and :not(), the specificity of :has() is replaced by the specificity of the most specific selector in its selector list argument. Unlike :nth-child() or :link, :has() itself doesn't add to the specificity.
<div class="parent">
<p class="child">yo!</p>
</div>/* A tag and a class */
div:has(.child) {
background: red;
}
/* A tag: specificty too low */
div {
background: blue;
}
/* A class: specificty too low */
.parent {
background: green;
}
/* A tag and a class: same specificty as div:has(.child) */
div.parent {
background: orange;
}Further reading
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK