Relační selektor :has – zdaleka ne jen selektor rodiče

Vzhůru dolů 21.12.2023 16:31 :has je funkční selektor, který můžeme mimo jiné použít jako selektor rodiče, tedy vybrat rodičovské prvky, obsahující potomky určitého typu: a:has Tento selektor cílí na všechny odkazy , které mají v DOMu jako potomka obrázek . Je to selektor rodiče. Ale taky nemusí být. Selektor :has od 19. 12. 2023, tedy vydání Firefoxu 121, podporován všemi prohlížeči. Fanfáry prosím! Nejen selektor rodiče Selektor :has je součástí návrhu specifikace W3C Selectors Level 4. Patří mu velká pozornost, protože jednou z možností jeho použití je právě selektor rodiče. Co je selektor rodiče? To je v CSS už asi dvacet let něco jako banány za komunistů. Lidé to strašně moc chtějí, stáli by na to fronty, ono se to občas někde objeví, ale zpravidla je to planý poplach. Tak teď už jsou banány na skladě a pro každého. Jenže :has ve skutečnosti selektor rodiče není. Doslovně, přesně podle specifikace, jde o relační pseudotřídu . Relační proto, že do závorek můžete napsat jakýkoliv relativní selektor, se vztahem k selektoru před dvojtečkou: a:has section:has img:has Všimněte si posledního případu. Vybírá prvního z bezprostředně navazujících sourozenců v DOMu. Tady o selektoru rodiče nemůže být řeč. Navíc je to užitečné a skoro stejně nedostatkové jako ty banány za komunistů. Nebo jako selektor rodiče v CSS. Ukázka se selektorem rodiče Podívejme se na následující CodePen. Jsou v něm dva prvky .box. Jeden obsahuje obrázek a jeden pouze text: Lorem ipsum… Quam doloremque… Relační pseudotřídou :has se pak snažím zacílit boxík s obrázkem: .box:has Výsledek uvidíte níže. Ukázka se selektorem předchozího sourozence V tomto demíčku se zaměříme na stylování prvků v textu, za nimiž následují jiné specifické prvky. Máme dva nadpisy, za jedním následuje odstavec, za druhým seznam položek: Lorem ipsum, dolor sit amet Lorem… Quam doloremque… Lorem… Pokud bychom ten druhý nadpis chtěli stylovat jinak, opět nemusíme složitě přidávat třídu. Prostě jen použijeme relační pseudotřídu :has: h2:has Na živo zde: Další možnosti, občas dechberoucí Když jsem procházel, co se selektorem :has vykouzlili jiní autoři, občas mě srdíčko poskočilo radostí. O jejich nápady se s vámi musím podělit, v tomto případě hlavně o nápady Matthiase Otta. form:has form:has figure img:has .grid:has :last-child) Všimněte si hlavně té poslední ukázky. Rozložení v CSS layoutu upravujeme počítáním prvků uvnitř. Jde o aplikaci takzvaných quantity queries, které už před lety popsal Heydon Pickering. Prostě můžete změnit layout podle toho, kolik je v něm položek. Kurnik šopa, proč já už vlastně nekóduju weby? Další zajímavé tipy přidal například na X/Twitteru Wes Bos u příležitosti plné podpory selektoru :has ve všech prohlížečích. Uvedu pár příkladů: The Anywhere Selector - Např. pokud je v  zaškrtnutý checkbox, můžete vzít jakýkoli jiný prvek a nastylovat jej. Layout Targeting – Na základě struktury obsahu stránky mohu měnit rozvržení. All Siblings – Když na potomka najedete kurzorem, vybere všechny ostatní elementy. Máte jiný zajímavý příklad použití? Napište mi, přidám jej do článku. Podpora v prohlížečích Podpora je v prosinci 2023 plná. Firefox se přidal čerstvě, takže budeme muset chvilku počkat, než vymřou jeho starší verze. CanIUse: caniuse.com/css-has Pokud tedy začínáte nový projekt, nemusíte s použití příliš váhat. V mezičase může být užitečná detekce prohlížeče, které :has neumí. Prostě využijeme dotaz na podporu @supports: @supports selector ) Nevím jak vy, ale já mám z podpory :has v prohlížečích fakt radost. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .