Day 26: using combinators in :has()

You already know that the :has() pseudo-class allows you to check whether a parent element contains certain children, but you can also make this selector more specific, or check other relations the element might have.

Child combinators

You can check whether an element contains a specific direct child element.

For example, if you have a fieldset and you want to make sure that it contains a legend and that this legend is actually a direct child item of the fieldset, which is important, you could use the child combinator (>) in your :has() pseudo-class.

fieldset:not(:has(> legend)) {
  border: 10px solid red;
}
<fieldset>  
  <div>
    <legend>Letters</legend>
  </div>
  <input type="radio" name="letters" id="a">
  <label for="a">a</label>

  <input type="radio" name="letters" id="b">
  <label for="b">b</label>
  </div>
</fieldset>
Letters



This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

You already know that the :has() pseudo-class allows you to check whether a parent element contains certain children, but you can also make this selector more specific, or check other relations the element might have.

Child combinators

You can check whether an element contains a specific direct child element.

For example, if you have a fieldset and you want to make sure that it contains a legend and that this legend is actually a direct child item of the fieldset, which is important, you could use the child combinator (>) in your :has() pseudo-class.

fieldset:not(:has(> legend)) {
  border: 10px solid red;
}
<fieldset>  
  <div>
    <legend>Letters</legend>
  </div>
  <input type="radio" name="letters" id="a">
  <label for="a">a</label>

  <input type="radio" name="letters" id="b">
  <label for="b">b</label>
  </div>
</fieldset>
Letters

Next-sibling combinators

:has() is not just a parent selector, you can select elements based on other relations, too. By using the next-sibling combinator, you can check whether an element has a specific next sibling element, and style it accordingly.

h2 {
  margin-block-end: 0.7em; 
}

h2:has(+ time) {
  margin-block-end: 0;
}

The <h2> has a block end margin of 0.7em by default, but when its next sibling is a <time> element, the margin is 0.

Heading

Teaser text

Heading

Teaser text

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-10-31T00:00:00+00:00) Day 26: using combinators in :has(). Retrieved from https://www.scien.cx/2022/10/31/day-26-using-combinators-in-has-2/

MLA
" » Day 26: using combinators in :has()." Manuel Matuzović | Sciencx - Monday October 31, 2022, https://www.scien.cx/2022/10/31/day-26-using-combinators-in-has-2/
HARVARD
Manuel Matuzović | Sciencx Monday October 31, 2022 » Day 26: using combinators in :has()., viewed ,<https://www.scien.cx/2022/10/31/day-26-using-combinators-in-has-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 26: using combinators in :has(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/31/day-26-using-combinators-in-has-2/
CHICAGO
" » Day 26: using combinators in :has()." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/31/day-26-using-combinators-in-has-2/
IEEE
" » Day 26: using combinators in :has()." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/31/day-26-using-combinators-in-has-2/. [Accessed: ]
rf:citation
» Day 26: using combinators in :has() | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/31/day-26-using-combinators-in-has-2/ |

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