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ů)

  1. Webdesignérův průvodce po CSS3: nultá kapitola 14.9.2010
  2. Webdesignérův průvodce po CSS3: první díl 21.9.2010
  3. Webdesignérův průvodce po CSS3: Media Queries 5.10.2010
  4. Webdesignérův průvodce po CSS3: selektory 12.10.2010
  5. Webdesignérův průvodce po CSS3: typografie 19.10.2010
  6. Fonty a web včera, dnes a zítra 18.3.2011

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.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 12

Přehled komentářů

PeterKahoun Srozumitelnost
JakubS Re: Srozumitelnost
Martin Malý Re: Srozumitelnost
Marvin Re: Srozumitelnost
besh Re: Srozumitelnost
PeterKahoun Další korekturka
Martin Malý Re: Další korekturka
Enumag Nedostatky v článku
Martin Malý Re: Nedostatky v článku
viktor selektory mam rad
rooobertek Re: selektory mam rad
juraj chyby
Zdroj: https://www.zdrojak.cz/?p=3342