This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
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.
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;
}
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-13T09:38:54+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.