Přejít k navigační liště

Zdroják » Webdesign » Webdesignérův průvodce po CSS3: selektory

Webdesignérův průvodce po CSS3: selektory

Články Webdesign

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.

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.

Komentáře

Subscribe
Upozornit na
guest
12 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
PeterKahoun

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!

JakubS

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é.

Martin Malý

Myslíte místo textového popisku udělat vždy tabulku? Zvážíme to, díky za připomínku.

Marvin

Mozna by byla lepsi souhrna tabulka na konci clanku, ale uvest to u kazde skupiny nebo primo jednotlivych popisu zvlast rozhodne neni k zahozeni.

besh

Dobry prehled podpory je na sitepoint.com, viz treba http://reference.sitepoint.com/css/pseudoclass-nthchild#compatibilitysection

PeterKahoun

> Například tedy pomocí p:nth-child(4n+1) mohu vybrat každý pátý odstavec na stránce.

(?!)

Martin Malý

Díky, opraveno a přeformulováno.

Enumag

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

Martin Malý

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.

viktor

a rad ich aj v praxi pouzivam :)

rooobertek

Aj ja. Ale potom pozriem do IE a musím to aj tak ohackovať.

juraj

> „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.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.