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.

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! 🙂

Print Share Comment Cite Upload Translate

APA

Manuel Matuzović | Sciencx (2024-05-12T06:42:15+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/.

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/

HARVARD

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

VANCOUVER

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

CHICAGO

" » Day 13: the :where() and :is() pseudo classes." Manuel Matuzović | Sciencx - Accessed 2024-05-12T06:42:15+00:00. https://www.scien.cx/2022/10/12/day-13-the-where-and-is-pseudo-classes/

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/. [Accessed: 2024-05-12T06:42:15+00:00]

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/ | 2024-05-12T06:42:15+00:00