A :has egy könyörtelen választó

A kiadás felé vezető úton történt egy apróság CSS :has() választó a régi Almanachhoz. Eredetileg leírtam :has() mint „megbocsátó” szelektor, az az elképzelés, hogy az érvelésben bármit kiértékelnek, még akkor is, ha egy vagy több elem érvénytelen.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

Lát ::scoobydoo ott? Ez teljesen érvénytelen. A megbocsátó választólista figyelmen kívül hagyja ezt a hamis szelektort, és úgy értékeli a többi elemet, mintha az így lenne megírva:

article:has(h2, ul) { }

:has() valóban megbocsátó válogató volt egy korábbi, 7. május 2022-i tervezetben. De ez megváltozott probléma bejelentése után hogy a megbocsátó természet ütközik a jQuery-vel amikor :has() komplex szelektort tartalmaz (pl. header h2 + p). A W3C a következő határozatra szállt csinál :has() „meg nem bocsátó” választó csak néhány hete.

Tehát az előző példánk? A teljes választólista érvénytelen, mert a hamis választó érvénytelen. De a másik két megbocsátó választó, :is() és a :where(), változatlanok maradnak.

Van erre egy kis megoldás. Emlékezik, :is() és a :where()megbocsátóak, még akkor is, ha :has() nem. Ez azt jelenti, hogy beágyazhatjuk bármelyik választót :has() hogy elnézőbb magatartást tanúsíts:

article:has(:where(h2, ul, ::-scoobydoo)) { }

Hogy melyiket használja, annak sajátossága miatt számíthat :is() listája legspecifikusabb eleme határozza meg. Tehát, ha valami kevésbé konkrétra van szüksége, akkor jobban teszi, ha hozzányúl :where() mivel nem növeli a specifikussági pontszámot.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Frissítettünk néhány bejegyzésünket, hogy tükrözzék a legfrissebb információkat. Rengeteg mást látok a vadonban, amelyeket frissíteni kell, így csak egy kis PSA mindenkinek, akinek ugyanezt kell tennie.

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/has-is-an-unforgiving-selector/