Day 13: the :where() and :is() pseudo-classes

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

The :where() and :is() pseudo-classes allow you to write large lists of selectors in a more compact form. You can combine selectors instead of writing repetitive lists.

Combining input types

/* Before */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"] {
  border: 2px solid;
}

/* After */
input:where(
  [type="text"],
  [type="email"],
  [type="url"],
  [type="tel"],
  [type="password"],
  [type="search"]
) {
  border: 2px solid;
}

Combining pseudo-classes

a:is(:link, :visited) {
  color: green;
}

a:is(:hover, :focus) {
  text-decoration: none;
}

Now you might be thinking, “Uhm,…can’t I just use :where() instead of :is() and vice versa? What’s the difference?”.

A fantastic question that I’ll answer in tomorrows post! :)

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-12T00:00:00+00:00) Day 13: the :where() and :is() pseudo-classes. Retrieved from https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes-2/

MLA

" » Day 13: the :where() and :is() pseudo-classes." Manuel Matuzović | Sciencx - Wednesday October 12, 2022, https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes-2/

HARVARD

Manuel Matuzović | Sciencx Wednesday October 12, 2022 » Day 13: the :where() and :is() pseudo-classes., viewed ,<https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes-2/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 13: the :where() and :is() pseudo-classes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes-2/

CHICAGO

" » Day 13: the :where() and :is() pseudo-classes." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes-2/

IEEE

" » Day 13: the :where() and :is() pseudo-classes." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes-2/. [Accessed: ]

rf:citation

» Day 13: the :where() and :is() pseudo-classes | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes-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.