Day 6: the :has() pseudo-class

:has() allows you to check whether a parent element contains specific children.

In the following example, each .form-item that contains/has a child with the aria-invalid attribute set to “true” displays text in red color. (currently only in Chrome/Edge 105+ and Safari 15.4+)

<form>
  <div class="form-item">
    <label for="name">Name</label><br>
    <input type="text" id="name" required aria-invalid="true">
  </div>

  <div class="form-item">
    <label for="email">E-Mail</label><br>
    <input type="text" id="email">
  </div>
</form>

.form-item {
  --color: #000;

  /* The default color is #000 */
  color: var(--color);
}

input {
  /* The default border-color is #000 */
  border: 1px solid var(--color);
}

/* If the .form-item contains an element with [aria-invalid="true"], 
the text and border color changes to #F00 */
.form-item:has([aria-invalid="true"]) {
  --color: #F00;
}

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ć

:has() allows you to check whether a parent element contains specific children.

In the following example, each .form-item that contains/has a child with the aria-invalid attribute set to “true” displays text in red color. (currently only in Chrome/Edge 105+ and Safari 15.4+)



<form>
  <div class="form-item">
    <label for="name">Name</label><br>
    <input type="text" id="name" required aria-invalid="true">
  </div>

  <div class="form-item">
    <label for="email">E-Mail</label><br>
    <input type="text" id="email">
  </div>
</form>

.form-item {
  --color: #000;

  /* The default color is #000 */
  color: var(--color);
}

input {
  /* The default border-color is #000 */
  border: 1px solid var(--color);
}

/* If the .form-item contains an element with [aria-invalid="true"], 
the text and border color changes to #F00 */
.form-item:has([aria-invalid="true"]) {
  --color: #F00;
}

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-03T00:00:00+00:00) Day 6: the :has() pseudo-class. Retrieved from https://www.scien.cx/2022/10/03/day-6-the-has-pseudo-class-2/

MLA
" » Day 6: the :has() pseudo-class." Manuel Matuzović | Sciencx - Monday October 3, 2022, https://www.scien.cx/2022/10/03/day-6-the-has-pseudo-class-2/
HARVARD
Manuel Matuzović | Sciencx Monday October 3, 2022 » Day 6: the :has() pseudo-class., viewed ,<https://www.scien.cx/2022/10/03/day-6-the-has-pseudo-class-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 6: the :has() pseudo-class. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/03/day-6-the-has-pseudo-class-2/
CHICAGO
" » Day 6: the :has() pseudo-class." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/03/day-6-the-has-pseudo-class-2/
IEEE
" » Day 6: the :has() pseudo-class." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/03/day-6-the-has-pseudo-class-2/. [Accessed: ]
rf:citation
» Day 6: the :has() pseudo-class | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/03/day-6-the-has-pseudo-class-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