This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
There's an important difference between :is() and :where().
Let's take the following example. We have two buttons and we use :where() on the first button to apply a background color and :is() on the second button.
<button class="button1">where</button>
<button class="button2">is</button>button:where(.button1) {
background-color: rebeccapurple;
}
button:is(.button2) {
background-color: rebeccapurple;
}
Visually the buttons are identical, but the difference is the specificity of the selector.
The button with the :where() pseudo-class has the same specificity as a simple tag selector (for example button {}) because the specificity of :where() is 0. The arguments in :where() don't add to the specificity of the selector.
The button with the :is() pseudo-class has the same specificty as a combined selector (for example button.button2 {}) because :is() takes on the specificity of the most specific selector in its arguments.
/* Specificity: 0 0 1 (0 ids, 0 classes, 1 tag) */
button:where(.button1) {
background-color: rebeccapurple;
}
/* Specificity: 0 1 1 */
button:is(.button2) {
background-color: rebeccapurple;
}
/* Specificity: 0 0 1
-> Same as the first button. Overwrites rebeccapurple.
-> Lower than the second button. Doesn't overwrite rebeccapurple.
*/
button {
background-color: salmon;
}
/* Specificity: 0 1 0
-> Still lower than the second button. Doesn't overwrite rebeccapurple.
*/
.button2 {
background-color: green;
}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ć
Manuel Matuzović | Sciencx (2022-10-13T00:00:00+00:00) Day 14: the difference between :is() and :where(). Retrieved from https://www.scien.cx/2022/10/13/day-14-the-difference-between-is-and-where-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.