Day 16: the specificity of :has()

posted on 17.10.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;
}

yo!

See on CodePen

Day 16: the specificity of :has()

Further reading