Day 16: the specificity of :has()

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!


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

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!


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-10-17T09:38:54+00:00) Day 16: the specificity of :has(). Retrieved from https://www.scien.cx/2022/10/17/day-16-the-specificity-of-has/

MLA
" » Day 16: the specificity of :has()." Manuel Matuzović | Sciencx - Monday October 17, 2022, https://www.scien.cx/2022/10/17/day-16-the-specificity-of-has/
HARVARD
Manuel Matuzović | Sciencx Monday October 17, 2022 » Day 16: the specificity of :has()., viewed ,<https://www.scien.cx/2022/10/17/day-16-the-specificity-of-has/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 16: the specificity of :has(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/17/day-16-the-specificity-of-has/
CHICAGO
" » Day 16: the specificity of :has()." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/17/day-16-the-specificity-of-has/
IEEE
" » Day 16: the specificity of :has()." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/17/day-16-the-specificity-of-has/. [Accessed: ]
rf:citation
» Day 16: the specificity of :has() | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/17/day-16-the-specificity-of-has/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts