Selektory v CSS: znáte je všechny?

Vzhůru dolů 06.05.2022 16:15 Tímto textem v příručce doplňuji mezery, které mám na Vzhůru dolů v oblasti pokrytí základů CSS. Při rešerši jsem si všiml, že takto komplexně se selektory snad žádný český text nezabývá. Tož tady jeden máte. Jasně, cílím zde především na začátečníky, ale myslím, že osvěžit si tohle téma neuškodí ani pokročilým. Pojďme se nejprve podívat na tabulkové shrnutí toho nejdůležitějšího, co v článku najdete. Nejdůležitější selektory Selektory vybírají určitou skupinu prvků v DOMu a dovolí ji stylovat. Selektor Zápis Třída .class Prvek tag Identifikátor #id Atribut Všechno * Nejdůležitější kombinátory Kombinátory spojují jednoduché selektory do složitějších skupin a umožňují, aby stylování platilo jen za určitých podmínek. Kombinátor Zápis Potomek A B Dítě A > B Následujícího sourozence A + B Pozdějšího sourozence A ~ B V článku zcela úmyslně neuvádím pseudotřídy, které mezi selektory v CSS bezpochyby patří. Ale pořád to tady chci udržet v rozsahu článku, nikoliv knížky. Text o pseudotřídách bude následovat. Selektory prvků Tyto selektory vybírají prvky z DOMu podle názvu HTML značky. tag – selektor typu Obsahuje název prvku HTML a představuje instanci tohoto typu prvku ve stromu dokumentu. Příklady: h1 – představuje všechny elementy v dokumentu. li span – vybírá všechny prvky zanořené v prvku . * – univerzální selektor Speciální varianta selektoru typu, který reprezentuje prvek libovolného typu. Příklady: * – představuje všechny elementy v dokumentu. body * .box – představuje prvek s třídou .box, který je v zanoření druhé úrovně v prvku . Selektory atributů Selektory, které vybírají prvky podle atributů – jejich existence, shody s jejich celou hodnotou nebo s částí hodnoty. .className – selektor třídy Jeden z nejznámějších a asi rovnou nejužitečnější selektor, který vybírá prvky podle třídy. Představuje prvky patřící do třídy identifikované pomocí atributu class v HTML. Příklad: … … … Selektor .a vybere jak , tak všechny . Další příklady: .heading – všechny prvky, které mají atribut class nastavený na heading. h1.heading – všechny prvky , které mají třídu heading. h1.heading.heading-large – všechny prvky , které mají třídu heading a zároveň heading-large. Možná jste si všimli, že zápis .heading je ekvivalentní zápisu vlnovkového selektoru atributu . Na selektorech třídy je dnes postaveno skoro celé stylování webů, vzpomeňme například metodiky OOCSS, BEM, ale i novější utility CSS. #id – selektor ID Selektor ID představuje instanci prvku s identifikátorem, který odpovídá hodnotě v atributu id. Příklad: … … … Selektor .a#first vybere jen . V HTML dokumentech je možné, aby jednomu ID selektoru odpovídalo více prvků, je to tak v pořádku z pohledu CSS selektoru, nikoliv ale samozřejmě z pohledu HTML sémantiky nebo přístupnosti. – selektory přítomnosti a hodnoty atributů Vybíráme, zda na prvku HTML existuje atribut nebo detekujeme jeho hodnotu. Toto jsou selektory, které hledají existenci atributu nebo jeho konkrétní hodnotu na HTML prvku. Typy selektorů atributů: Selektor Vysvětlení h1 Prvek , který má atribut title s jakoukoliv hodnotou. h1 Atributový selektor přesného obsahu. Prvek , který má atribut title v hodnotě přesně Ahoj. h1 Vlnovkový atributový selektor shody jedné hodnoty. Prvek , u něhož atribut title alespoň v jedné hodnotě obsahuje řetězec Ahoj. Hodnoty pro potřeby selektory oddělují mezerami, takže selektor splňuje. h1 Selektor shody prefixu. Toto je zvláštní. Vybraná hodnota musí být buď přesně Ahoj, nebo začínat Ahoj bezprostředně následovaná znakem -. Dává to smysl asi jen v případě výběru jazykových kódů. Např. odpovídá řetězcům en i en-US. – selektory podřetězců atributů Zvolíme prvky podle shody s částí hodnoty atributu. Jde o selektory pro hledání podřetězců v hodnotě atributu. Typy atributových selektorů podřetězců: Selektor Vysvětlení h1 Atributový selektor se stříškou reprezentuje prvek s atributem title, jehož hodnota začíná Ahoj. h1 Atributový selektor s dolarem reprezentuje prvek s atributem title, jehož hodnota končí Ahoj. h1 Atributový selektor s hvězdičkou reprezentuje prvek s atributem title, jehož hodnota obsahuje Ahoj. Ve všech případech selektorů podřetězců platí, že pokud by hodnota byla prázdný řetězec, pak selektor nepředstavuje nic. Prostě se selektorem daný prvek nevybere. – přepínač case-sensitivity V tomto novém přepínači můžeme zapnout nebo vypnout citlivost na rozlišování malých a velkých písmen. Standardně totiž selektory pro HTML nerozlišují malá nebo velká písmena. Tímto můžeme citlivost na rozdíl mezi nimi zapnout. Identifikátor s před uzavírací závorkou značí „sensitive“, tedy citlivost na rozlišování velkých a malých písmen. Naopak identifikátor i znamená „insensitive“ tedy nerozlišování. V HTML pro vás bude užitečný jen ten první. Příklad: h1 – vybere prvky s atributem title v hodnotě Ahoj, ale nikoliv už ahoj. Mimochodem, i tenhle relativně nový přepínač podporují všechny moderní prohlížeče. Viz CanIUse.com. Kombinátory Kombinátory jsou speciální znaky, které umožňují kombinovat jednoduché selektory do složitějších a rozšiřovat platnost selektoru jen za splnění podmínek, jako je například vnoření prvku do určitého rodiče v DOMu. Kombinátor potomka Kombinátor s bílým znakem odděluje dva selektory a vybírá potomka , který je zanořený do určitého prvku A. Selektor ve tvaru A B představuje prvek B, který je libovolným potomkem nějakého předka prvku A. Příklad: … … … Selektor .box .a vybere prvek a také všechny prvky . Další příklady: .heading span – všechny prvky , které jsou potomkem prvků s třídou heading. h1 em – všechny prvky , které jsou potomkem prvku . h1 * em – všechny prvky , které jsou potomkem ve druhém a vyšším zanoření uvnitř prvku . A > B – kombinátor dítěte Kombinátor se znaménkem větší než vybírá prvek B, který je přímým potomkem prvku A. Tedy zatímco A B vybere B v jakékoliv úrovni zanoření uvnitř A, pak A > B vybírá jen ty B, které jsou přímými potomky A, tedy jeho „dětmi“. Vezměme příklad: … … … Selektor .box > .a vybere jen prvek . Další příklady: .heading > span – všechny prvky , které jsou přímým potomkem prvků s třídou heading. h1 > em – všechny prvky , které jsou přímým potomkem prvku . .box ol > li p – všechny prvky , které jsou potomkem , přičemž musí být přímým potomkem a potomkem libovolné úrovně v prvku s třídou .box. Mezera kolem kombinátoru dítěte je volitelná. h1 > em a h1>em je totožné. Pro lepší čitelnost zápisu se upřednostňuje zápis s mezerami. A + B – kombinátor vedlejšího sourozence Kombinátor s plus vybírá prvek B, který je vedlejším sourozencem A. Prvky reprezentované oběma selektory mají ve stromu dokumentu stejného rodiče a prvek reprezentovaný prvním bezprostředně předchází prvku reprezentovanému druhým . Máme zde příklad: … … … Selektor .a + p vybere jen prvek . Další příklady: h1 + p – všechny prvky , které následují po . h1.heading + h2 – všechny prvky , které následují po prvku s třídou heading. Mezery jsou opět volitelné. h1 + p je totéž jako h1+p, ale upřednostňujte tu první. A ~ B – kombinátor pozdějšího sourozence Kombinátor s vlnovkou vybírá prvek B, který je vedlejším sourozencem A, ale zároveň jej přímo nenásleduje. Oba prvky mají stejného rodiče. Rozdíl oproti A + B je u vlnovkového kombinátoru v tom, že prvky nutně nemusí být vedle sebe. Zpět k příkladu: … … … Selektor .a ~ p vybere prvky a . Další příklady: h1 ~ p – všechny prvky , které mají stejného rodiče jako . h1.heading ~ h2 – všechny prvky , které mají stejného rodiče jako s třídou heading. Mezery v selektoru jsou opět volitelné. Související „Problémy“ CSS Dědičnost Kaskáda a specificita Podpora v prohlížečích Všechny CSS selektory, které zde zmiňuji, jsou plně podporované ve všech prohlížečích, včetně MSIE. Jedinou výjimkou je přepínač citlivosti na velikost písmen , který už v tomto starém prohlížeči nerozchodíte. Je zde ale jedna skupina selektorů, zmíněná ve specifikaci Selectors Level 4, která podporu nemá. Selektory sloupců A || B – sloupcový kombinátor. Vybírá prvek A patřící ke sloupci B. Viz např. v tabulkách col.selected || td. Bylo by užitečné takový selektor mít, ale zatím to žádný prohlížeč nepodporuje, stejně jako podobně zaměřené pseudotřídy :nth-col a :nth-last-col . CanIUse.com Specifikace V pokračování tohoto textu se zaměřím na pseudotřídy v CSS, které jsou vlastně jen trošku zvláštní selektory. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .