Pseudoclasele :is() și :where()

Pseudoclasa :is()

Pseudoclasa :is() este utilizată pentru a simplifica selectorii lungi. Funcția pseudoclasei :is() acceptă o listă de selectori pentru a alege elemente HTML.

De exemplu, dorim să aplicăm un stil paragrafelor care sunt la primul nivel de încorporare în elementele header, main, footer:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
   <style>
       /* header > p, main > p, footer > p {font-size: 18px; font-family: Verdana;}varianta alternativa fara :is*/
       :is(header, main, footer) > p  {font-size: 18px; font-family: Verdana;}
   </style>
</head>
<body>
<header>
   <p>Text in Header</p>
   <div><p>Text in Header Div</p></div>
</header>
<main>
   <p>Text in Main</p>
   <div><p>Text in Main Div</p></div>
</main>
<footer>
   <p>Text in Footer</p>
   <div><p>Text in Footer Div</p></div>
</footer>
</body>
</html>

În acest caz, pentru paragrafe se setează fontul Verdana de dimensiunea 18px:

Fără utilizarea pseudoclasei :is, ar fi trebuit să scriem:

header > p, main > p, footer > p {font-size: 18px; font-family: Verdana;}

Pseudoclasa :is permite să reducem semnificativ această înregistrare:

:is(header, main, footer) > p {font-size: 18px; font-family: Verdana;}

Adică, în acest caz, expresia :is(header, main, footer) selectează toate elementele header, main și footer și le combină cu selectorii următori.

Pseudoclasa :is poate fi încastrată, de exemplu, luăm exemplul de mai sus, doar că acum vom selecta doar acele paragrafe care se află în elementele div:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
   <style>
       :is(:is(header, main, footer) div) > p {font-size: 18px; font-family: Verdana;}
   </style>
</head>
<body>
<header>
   <p>Text în Antet</p>
   <div><p>Text în Div-ul din Antet</p></div>
</header>
<main>
   <p>Text în Principal</p>
   <div><p>Text în Div-ul din Principal</p></div>
</main>
<footer>
   <p>Text în Subsol</p>
   <div><p>Text în Div-ul din Subsol</p></div>
</footer>
</body>
</html>

Pseudoclasa :where

Pseudoclasa :where() funcționează asemănător cu :is(), acceptând de asemenea un set de selectori și selectând toate elementele care corespund selectorilor. De exemplu, același prim exemplu, doar că în loc de :is() acum folosim :where:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
   <style>
       :where(header, main, footer) > p {font-size: 18px; font-family: Verdana;}
   </style>
</head>
<body>
<header>
   <p>Text în Antet</p>
   <div><p>Text în div-ul din Antet</p></div>
</header>
<main>
   <p>Text în Principal</p>
   <div><p>Text în div-ul din Principal</p></div>
</main>
<footer>
   <p>Text în Subsol</p>
   <div><p>Text în div-ul din Subsol</p></div>
</footer>
</body>
</html>

Și vom obține același rezultat ca și pentru :is().

Diferența dintre :is() și :where()

Care este diferența dintre :is() și :where()? Pseudoclasa :is() aplică specificitatea stilurilor (selector specificity), care este determinată de selectorul cu cel mai mare rang. Pentru stilurile pseudoclasei :where(), rangul selectorilor este întotdeauna egal cu 0.

Să examinăm un exemplu asemănător. Aplicarea :is():

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
   <style>
       div > :is(h2, #content) { background: red; }
       
       div > h2,
       div > #content {
           background: white;
       }
   </style>
</head>
<body>
<div>
   <h2>Titlu</h2>
   <div id="content">Conținut principal</div>
</div>
</body>
</html>

Aici, rangul selectorilor în expresia :is(h2, #content) va fi calculat după cel mai mare selector - în acest caz, identificatorul #content. Astfel, rangul selectorilor în pseudoclasa :is() va fi de 100 de puncte (selectorii de taguri sunt evaluați la 1 punct).

Apoi urmează selectorul div > h2, care redefinește culoarea de fundal. Dar deoarece rangul său este mai mic decât cel al div > :is(h2, #content), acest stil nu va fi aplicat.

Al treilea selector div > #content are același rang ca și div > :is(h2, #content), deci stilul său va funcționa.

În final, pentru elementul <h2> redefinirea culorii de fundal nu va funcționa.

Acum schimbăm pe :where():

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
   <style>
       div > :where(h2, #content) { background: red; }
       
       div > h2,
       div > #content {
           background: white;
       }
   </style>
</head>
<body>
<div>
   <h2>Titlu</h2>
   <div id="content">Conținut principal</div>
</div>
</body>
</html>

Rangul selectorului :where(h2, #content) va fi egal cu 0, astfel că stilul definit de selectorul div > :where(h2, #content) va fi suprascris de stilurile ulterioare.