:has on andestamatu valija

Avaldamise teel juhtus väike asi CSS :has() valija vanasse almanahhi. Algselt kirjeldasin :has() "andestava" valijana, mille mõte on, et kõike selle argumendis hinnatakse, isegi kui üks või mitu elementi on kehtetud.

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

nägema ::scoobydoo seal? See on täiesti kehtetu. Andestav valijate loend ignoreerib seda võltsvalijat ja hindab ülejäänud üksusi nii, nagu oleks see kirjutatud järgmiselt:

article:has(h2, ul) { }

:has() oli tõepoolest andestav valija eelmises 7. mai 2022. aasta mustandis. Aga see muutus pärast probleemist teatamist et andestav loomus läheb vastuollu jQueryga kui :has() sisaldab keerulist valijat (nt header h2 + p). W3C langes resolutsioonile tegema :has() "andestamatu" valija alles paar nädalat tagasi.

Niisiis, meie eelmine näide? Kogu valijate loend on kehtetu, kuna võlts valija on kehtetu. Kuid kaks teist andestavat valijat, :is() ja :where(), jäetakse muutmata.

Selle jaoks on natuke lahendust. Pea meeles, :is() ja :where()on andestavad, isegi kui :has() ei ole. See tähendab, et saame pesastada ühe neist valijatest :has() andestavama käitumise saamiseks:

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

Kumba te kasutate, võib selle eripära tõttu olla oluline :is() määratakse selle loendi kõige spetsiifilisema üksuse järgi. Seega, kui teil on vaja midagi vähem spetsiifilist, peaksite paremini jõudma :where() kuna see ei lisa spetsiifilisuse skoori.

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

Värskendasime uusima teabe kajastamiseks mõnda oma postitust. Ma näen looduses palju teisi, mis vajavad värskendamist, nii et lihtsalt väike PSA kõigile, kes peavad sama tegema.

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/has-is-an-unforgiving-selector/