Day 16: the specificity of :has()

posted on

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>
/* 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;


See on CodePen.

Further reading