Webdesignérův průvodce po CSS3: selektory
Všichni se shodneme, že základem CSS jsou selektory. Jak zacílit konkrétní část HTML bylo vždycky dobrým tématem na dlouhé diskuse s kolegy kodéry. Co je udržitelnější do budoucna? Co je rychlejší? CSS3 přináší do téhle diskuse mnoho novinek, které nám mohou usnadnit práci či umožnit věci, o kterých jsme dříve mohli tak leda snít.
Seriál: Webdesignérův průvodce po CSS3 (6 dílů)
- Webdesignérův průvodce po CSS3: nultá kapitola 14. 9. 2010
- Webdesignérův průvodce po CSS3: první díl 21. 9. 2010
- Webdesignérův průvodce po CSS3: Media Queries 5. 10. 2010
- Webdesignérův průvodce po CSS3: selektory 12. 10. 2010
- Webdesignérův průvodce po CSS3: typografie 19. 10. 2010
- Fonty a web včera, dnes a zítra 18. 3. 2011
Nálepky:
Dnešní článek je taková referenční příručka pro použití jednotlivých selektorů a pro zjištění podpory v prohlížečích. Důležité v kódování je mít povědomí o tom, že tohle půjde, poté si již mohu dohledat konkrétní článek a implementaci. Takže vzhůru do přehledu toho, jak můžeme pomocí CSS3 vybírat elementy na stránce.
Cílíme dle atributů
První věc, kterou CSS3 vylepšuje, je vybírání pomocí atributů. Z CSS2 již známe E[foo|="en"], který vybere element E, který má atribut „foo“ s hodnotou „en“. Může ale nastat případ, kdy nevíme celou hodnotu atributu. Třeba proto, že na konci se automaticky inkrementuje číslo, které potřebujeme na naší webové stránce.
CSS3 právě toto řeší. Nově můžeme cílit jen část hodnoty atributu.
E[att^=”val”]
Element E, jehož hodnota atributu začíná „val“.
E[att$=”val”]
Element E, jehož hodnota atributu končí „val“.
E[att*=”val”]
Element E, jehož hodnota atributu obsahuje „val“.
Podpora v prohlížečích
Podporu nabízejí všechny prohlížeče kromě IE6-.
Cílíme pomocí pseudotříd
Pseudotřídy jsou také dobře známé – jsou to všelijaké :hover, :active a podobné. CSS3 jejich počet velmi výrazně rozšiřuje. Pojďme se na ně podívat.
E:root
Vybere kořenový element daného dokumentu. V HTML to tedy vždy bude <html>. Jediný rozdíl: :root má větší specificitu než klasické html.
Podporu nabízí všechny prohlížeče kromě IE. Do IE přináší podporu až IE9.
E:empty
Vybere prázdný element. Např. tedy prázdný <span></span>.
Podporu znovu nabízí všechny prohlížeče kromě IE8-.
E:target
Vybere element, který cílíme v URI. Takže když odkazujeme konkrétní část dokumentu přes dokument.html#cast-dokumentu, tak ji můžeme uživateli zvýraznit.
Podporu nabízí Mozilla, Webkit, IE9 a částečně i Opera (implementace má drobné chybky).
E:enabled x E:disabled
Vybere element formuláře, do kterého je povolené/zakázané zapisovat.
Podporu nabízí znovu všechny prohlížeče kromě IE8-.
E:checked
Vybere checkbox, který je zaškrtnutý.
Podpora je stejná jako u :enabled a :disabled.
E::selection
Když vybíráte text myší, tak se nějakým způsobem zvýrazňuje. Typicky podbarvuje nějakou barvou. Pomocí ::selection to můžeme ovlivnit.
Podporu nabízí znovu všichni kromě IE8-, u Mozilly musíte použít -moz-::selection.
E:not(s)
Vybere element E, který neodpovídá jednoduchému selektoru „s“.
Podporu nabízí všichni kromě IE8-.
Cílíme pořadí
Pomocí pseudotříd můžeme také cílit prvek, který splňuje určité podmínky, co se pořadí týče. Například je poslední svého typu apod. Taktéž můžeme cílit každý několikátý prvek, např. každý 3. řádek tabulky.
E:last-child, E:only-child
CSS2 přinesla :first-child, který vybere prvního potomka daného elementu, CSS3 zavádí :last-child, který vybere posledního potomka. :only-child pak vybere jediného potomka daného elementu.
Podpora je standardně všude kromě IE8-.
E:first-of-type x E:last-of-type x E:only-of-type
Vybere daný typ elementu, který splňuje řečenou podmínku. Tedy buď je první svého typu (např. první prvek seznamu), je poslední svého typu (poslední prvek seznamu) a nebo je jediný svého typu (seznam, který má jen jedno li).
Podporují všechny prohlížeče, IE až od verze 9.
E:nth-child(n) x E:nth-last-child(n)
Element, který je n-tým potomkem svého rodiče. První pravidlo počítá od začátku, druhé od konce.
Podpora v prohlížečích není ideální. Nabízí ji IE9, Firefox 3.5+, Safari. Opera má problémy s :nth-child(n).
E:nth-of-type(n) x E:nth-last-of-type(n)
Element, který je n-tým svého typu. První pravidlo počítá od začátku, druhé od konce.
Podpora je stejná jako u :nth-child(n).
Magické „n“
S čím můžeme u předchozích selektorů kouzlit, je parametr „n“. Tam totiž můžeme dosadit matematickou operaci, dle které se pak spočítá, co to vlastně cílí. Například tedy pomocí p:nth-child(5n+1) mohu vybrat první odstavec na stránce a pak každý „o pět dál“ (tedy první, šestý, jedenáctý, …). Kromě číselných operací tam také lze dosadit dvě klíčková slova – odd a even, tedy lichý a sudý, což logicky bude vybírat každý lichý, či každý sudý element.
E ~ F
Vybere element F, který má před sebou v dokumentu element E. Celé pravidlo funguje v rámci jednoho rodiče a element F nemusí následovat ihned po elementu E (jako je tomu u E+F).
Podporu nabízí všechny prohlížeče kromě IE7-.
Závěrem
Začíná to vypadat, že již není mnoho situací, které by CSS neumělo vyřešit, když kodér šikovně nakombinuje selektory. Doufejme, že tento článek vám rozšířil obzory a napadlo vás při jeho čtení několik situací, jak vám CSS3 mohlo usnadnit kódování minulého projektu. Pokud se dobře ujme nová verze Exploreru, IE9, tak všechny tyto selektory jistě uvidíme již brzy v běžné praxi.
Honza Sládek
Návrhář uživatelských zážitků. Spoluzaložil Clevis s.r.o., školí responsive a mobile webdesign, organizuje konferenci Webovina a soutěž pro mladé Junior Internet.
Jsem sám, komu připadá výraz „IE8-“ dvojznačný? Úpřimně, znamená to „starší než IE8“ anebo „IE8 a starší“? (Jo, už jsem na to přišel, druhé vysvětlení je správně.)
> CSS2 přinesla :first-child, který vybere prvního potomka daného elementu, CSS3 zavádí :last-child, který vybere posledního potomka. :only-child pak vybere jediného potomka daného elementu.
To je dost zavádějící. :-)
> ~ selektor
Podle to PPK to je IE7 a vyšší.
Díky!
Stav implementace v prohlížečích by se hodil do tabulky (dalo by se k tomu vracet) -v této podobě je to nepřehledné.
Myslíte místo textového popisku udělat vždy tabulku? Zvážíme to, díky za připomínku.
Mozna by byla lepsi souhrna tabulka na konci clanku, ale uvest to u kazde skupiny nebo primo jednotlivych popisu zvlast rozhodne neni k zahozeni.
Dobry prehled podpory je na sitepoint.com, viz treba http://reference.sitepoint.com/css/pseudoclass-nthchild#compatibilitysection
> Například tedy pomocí p:nth-child(4n+1) mohu vybrat každý pátý odstavec na stránce.
(?!)
Díky, opraveno a přeformulováno.
1) E:checked myslím vybere nejen checkbox ale i radio
2) E::selection ve firefoxu funguje jako ::-moz-selection, také je dobré uvést, že toto nefunguje (je nutné napsat to nadvakrát):
::selection, ::-moz-selection {
color: black;
}
3) E:not(s), co znamená „jednoduchý selektor“?!
4) E:first-of-type x E:last-of-type x E:only-of-type, chybí podpora v prohlížečích
5) Magické „n“, p:nth-child(4n+1) rozhodně nevybere každý pátý odstavec už z té podstaty, že u n je čtyřka.
6) E ~ F v IE7 a 8 sice funguje, ale pokud se v HTML vyskytují komentáře tak selže
7) Bylo by dobré zmínit oddělení pseudotříd (:) a pseudoprvků (::) v CSS3
8) Nejsou zméněné namespaces
Díky za připomínky. Myslím že ad 7 a 8 ještě přijdou, ad 5 viz výše, opraveno, ad 4 doplním, se zbytkem počkám na autora, jestli to necháme takto v komentářích nebo doplníme do textu. Díky.
a rad ich aj v praxi pouzivam :)
Aj ja. Ale potom pozriem do IE a musím to aj tak ohackovať.
> „Z CSS2 již známe E[foo|=“en“], který vybere element E, který má atribut „foo“ s hodnotou „en“.“
Nie, taký selektor by vyzeral [foo=“en“]. Selektor [foo|=“en“] vyberie aj tie elementy, ktorých hodnota atribútu foo začína na „en-“ (vrátane pomlčky).
> „u Mozilly musíte použít -moz-::selection.“
Zápis máte zlý, nie je to -moz-::selection, ale ::-moz-selection.
Plus viacero spomínaných chýb, napr. chybne uvedená podpora E ~ F.