Rozdíly v aplikaci CSS selektorů, pseudoelementů a pseudotříd

Zkoumání budeme provádět v nejpoužívanějších prohlížečích: Opera 10.10, Firefox 3.5, Chrome 3, Safari 4, Internet Explorer 8, Internet Explorer 7 a Internet Explorer 6.

U každého bodu uvedu příklad, krátký popis a podporu.

Selektory

Typový selektor

Příklad

 a {
	color: #0000ff;
}

Popis

Aplikuje se na všechny elementy a.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Selektor třídy

Příklad

a.myClass {
	color: #0000ff;
}

Popis

Aplikuje se na všechny elementy a s atributem class="myClass".

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Vícenásobné třídy

Příklad

.underline {
	text-decoration: underline;
}
.strong {
	font-weight: bold;
}
.coloured {
	color: red;
}
.underline.strong.coloured {
	font-size: 200%;
}

	<p class="underline strong coloured">Lorem ipsum</p>
	<p class="coloured">Lorem ipsum</p>
	<p class="strong">Lorem ipsum</p>
	<p class="coloured strong">Lorem ipsum</p>

Popis

Vícenásobné třídy se aplikují na elementy s nadefinovanými více třídami.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ne

Chyba

Internet Explorer 6 přidává vlastnosti z poslední vícenásobné třídy k samostatně nadefinované třídě. Podle ukázkového příkladu budou mít v IE6 všechny classy coloured dvakrát větší písmo. Správně by tuto vlastnost měli mít, pouze pokud jsou definované všechny tři třídy (underline, strong a coloured).

Selektor identifikátoru

Příklad

a#myID {
	color: #0000ff;
}

Popis

Aplikuje se na všechny elementy a s identifikátorem id=myID.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Selektor následníka

Příklad

 p a {
	color: #0000ff;
}

Popis

Aplikuje se na všechny elementy a, které jsou uvnitř elementu p.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Univerzální selektor

Příklad

* {
	color: #0000ff;
}

Popis

Univerzální selektor * se vztahuje na úplně všechny elementy.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Selektor potomka

Příklad

body>p {
	color: #0000ff;
}

Popis

Selektor potomka vybere všechny elementy, které jsou bezprostředními potomky mateřského elementu. V tomto případě se aplikuje pouze na elementy p, které jsou přímo v elementu body, nikoliv už na elementy p, které jsou v kódu dále zanořeny.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ne

Selektor obecných sourozenců

Příklad

h2~p {
	color: #0000ff;
}

Popis

Selektor obecných sourozenců vybere všechny elementy p, které mají stejného rodiče jako element h2 a zároveň následují za ním.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ne

Selektor přilehlých sourozenců

Příklad

h2+p {
	color: #0000ff;
}

Popis

Selektor přilehlých sourozenců vybere všechny elementy p, které mají stejného rodiče jako element h2 a zároveň přímo následují za ním.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ne

Chyba

V IE7 selektor přilehlých sourozenců nebude fungovat, pokud je v HTML komentář mezi přilehlými sourozenci.

Selektor s atributem

Příklad

[id] {
	color: #0000ff;
}

Popis

Tento výběr se aplikuje na elementy, které mají nastavený daný atribut. V našem případě atribut id.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ne

Pseudoelementy

První řádek

Příklad

p:first-line {
	color: #0000ff;
}

Popis

Prohlížeč u každého elementu p zobrazí první řádek nadefinovaným stylem. Tento pseudoelement funguje pouze na blokových elementech.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

První písmeno

Příklad

p:first-letter {
	color: #0000ff;
}

Popis

Prohlížeč u každého elementu p zobrazí první písmeno nadefinovaným stylem. Tento pseudoelement funguje pouze na blokových elementech.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Pseudoelementy :after, :before

Příklad

#box:before {
	content: "Tento text se objeví před prvkem s identifikátorem box."
}
#box:after {
	content: "Tento text se objeví za prvkem s identifikátorem box."
}

Popis

Tyto pseudoelementy slouží ke generovaní obsahu před nebo po zadaném prvku, které se používají ve spojení s vlastností content.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ne	ne

Pseudotřídy

První potomek

Příklad

div :first-child {
	color: #0000ff;
}

Popis

Požadovaný styl je aplikovaný na všechny elementy, které jsou prvním potomkem elementu div.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ne

Nenavštívený odkaz

Příklad

a:link {
	color: #0000ff;
}

Popis

Třída je aplikovaná na ještě nenavštívený odkaz.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Navštívený odkaz

Příklad

a:visited {
	color: #0000ff;
}

Popis

Třída je aplikovaná na již navštívený odkaz.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Aktivní odkaz

Příklad

a:active {
	color: #0000ff;
}

Popis

Třída je aplikovaná na aktivovaný odkaz. Došlo ke kliknutí na odkaz, ale ještě nebylo puštěno tlačítko myši.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Odkaz po najetí

Příklad

a:hover {
	color: #0000ff;
}

Popis

Třída je aplikovaná, pokud uživatel nad odkazem přejede.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ano

Najetí na neodkazové elementy

Příklad

p:hover {
	color: #0000ff;
}

Popis

Třída je aplikovaná po přejetí nad elementem p.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ano	ne

Zaměření

Příklad

:focus {
	color: #0000ff;
}

Popis

Třída je aplikovaná, pokud je element zaměřený (ve většině prohlížečů pomocí klávesy TAB).

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ne	ne

Jazyková pseudotřída

Příklad

:lang(de) {
	color: #0000ff;
}

Popis

Třída je aplikovaná na všechny elementy psané německy.

Podpora

Opera	Firefox	Chrome	Safari	IE8	IE7	IE6
ano	ano	ano	ano	ano	ne	ne

Co říci na závěr? Všechny nové prohlížeče selektory, pseudoelementy a pseudotřídy implementují bez problémů. Komplikace nastávají u starších prohlížečů, jako je Internet Explorer 7 a jeho starší bratříček Internet Explorer 6. Internet Explorer má v dnešní době stále přes desetiprocentní zastoupení, takže všechny výše zmiňované selektory, pseudoelementy a pseudotřídy ještě nějaký čas nebudeme moci plně používat.

2