CSS 3 selektory

Podpora „Vše“ znamená všechny relativně běžně používané prohlížeče (cca od Internet Exploreru 6). Některé selektory je možné ve starších IE rozběhat JavaScriptem.

Zápis/Název Význam Podpora
*

hvězdičkový selektor

Libovolný element.

Všechny elementy na stránce budou červeně.

* {color: red}

Všechny elementy v odstavci budou modré.

p * {color: blue}
Vše
E

typový selektor

Všechny elementy E kdekoliv na stránce.
div {color: red} /* všechny <div>y budou červené */
Vše
E[atribut]

atributový selektor

Element E s libovolným (ale nastaveným) atributem atribut.
h1[id] {color: red} /* nadpisy s identifikátorem budou červené */

U elementů, které mají nějaký výchozí typ se tento selektor chová nejednotně napříč prohlížeči – Explorerové 7 a 8 chytí na [type] nebo [type='text'] i <input> bez uvedeného typu (ukázka).

IE 7 +
E[atribut="hodnota"]

atributový s hodnotou

Element E s atributem atribut nastaveným na hodnota.
/* checkboxy budou červené */
input[type=checkbox] {background: red}
IE 7 +
E[atribut~="hodnota"]

atributový mezerový

Element E, u kterého je jeden z vícenásobných atributů (jednotlivé části atributu jsou odděleny mezerou) atribut roven hodnotě hodnota .
div[class~="active"] {color}

Zvýrazní aktivní položku HTML kódu.

<div class='item active'>

Selektor přesného atributu by nezafungoval.

IE 7+
E[atribut^="hodnota"]

atributový začínající na

Element E s atributem atribut začínající na hodnota.

Odkazy s protokolem HTTPS budou červené.

a[href^="https"] {color: red}
IE 7+
E[atribut$="hodnota"]

atributový končící na

Element E s atributem atribut končícím na hodnota.

Odkaz na PDF soubor bude červený.

a[href$=".pdf"] {color: red}
IE 7+
E[atribut*="hodnota"]

atributový obsahující

Element E s atributem atribut obsahující řetězec hodnota.
a[href*=".php"] {color: red}

Odkaz na *.php soubor bude červený, odkaz může mít nějaké parametry za otazníkem.

(Rozumné využití CSS vyhledávání.)

IE 7+
E[atribut|="en"]

atributový spojovníkový

Element E s atributem atribut, který bude mít jednotlivé části atributu odděleny spojovníkem a začíná na en.

Není potřeba používat více tříd (<span class='icon home'>).

span[class|="icon"] {display: block; width: 16px; height: 16px}
.icon-home {background: url("home.png")}
.icon-about {background: url("about.png")}
<span class='icon-home'></span>
<span class='icon-about'></span>
IE 7+
E:root

kořenový

Kořenový element E (<html>).

Nedává v HTML moc smysl, protože je to element <html>, který je na stránce vždy jeden, tak proč nepoužít html {}.

Snad jen kvůli hackování starších prohlížečů:

html {color: red}
:root {background: blue}

V podporujících prohlížečích bude stránka modrá, v nepodporujících červená.

IE 9+
Ukázka
E:nth-child(n)

n-tý potomek

Element E, který je n-tým potomkem nadřazeného elementu.

Druhý odstavec (čísluje se od jedničky) bude červený:

p:nth-child(2) {color: red}

Pseudo-třída nth-child je ale mocnější, lze s ní řešit různé věci jako odlišení sudých/lichých řádků, každého n-tého řádku apod.

tr:nth-child(odd) {color: red}  /* lichý řádek tabulky */
tr:nth-child(even) {color: blue} /* sudý řádek tabulky */

tr:nth-child(4n+1) {color: green} /* každý čtvrtý řádek */

Vyzkoušet si tyto selektory je pohodlně možné na nth-test.com.

IE 9+
E:nth-last-child(n)

n-tý potomek od konce

To samé jako nth-child, jen se elementy číslují od konce. IE 9+
E:nth-of-type(n)

n-tý steného typu

Podobné jako nth-child, jen nejde o potomky, ale o sourozence stejného typu (stejné značky). IE 9+
E:nth-last-of-type(n)

n-tý steného typu od konce

Totéž co nth-of-type, jen se sourozenci počítají od konce. IE 9+
E:first-child
E:last-child

první/poslední potomek

První nebo poslední potomek elementu E.

První položka seznamu bude červená a poslední modrá.

ul li:first-child {color: red} 
ul li:last-child {color: blue}
IE 7+
IE 9+
E:first-of-type
E:last-of-type

první/posledni typ

První/poslední element E daného typu v rámci společného rodiče.

První nadpis první úrovně na stránce bude červený.

h1:first-of-type {color: red}

Poslední nadpis první úrovně bude modrý.

h1:last-of-type {color: blue}
IE 9+
Ukázka
E:only-child

jedináček

Zachytí takový element E, který je jedináček – nemá žádné sourozence = jeho rodičovský element nemá jiné potomky.

Nadpis 1 bude jedináčkem.

<div>
  <h1>Nadpis 1</h1>
</div>
IE 9+
E:only-of-type

typový jedináček

Element E, který nemá žádné sourozence stejného typu.

Tedy CSS kód:

h1:only-of-type {color: red}
p:only-of-type {color: blue}

Obarví v následujícím HTML jen „Nadpis 2“ červeně a „Text 3“ modře.

<h1>Nadpis 1</h1>
<div>
  <h1>Nadpis 2</h1>
  <p>Text.
  <p>Text.
</div>
<h1>Nadpis 3</h1>
<p>Text 3
IE 9+
Ukázka
E:empty

prázdný

Element E, který nemá žádné potomky a ani neobsahuje text.
<span></span>
span:empty {display: block; padding: 10px; background: red}
IE 9+
Ukázka
E:valid
E:invalid

validace

Zachytí, zda je <input> řádně vyplněn. Buď v souladu s atributem pattern nebo s nějakým typem <input>u (url, email apod.). IE 10+
Ukázka
E:link
E:visited

odkazové pseudotřídy

Element E, tedy odkaz <a>, který (ne)byl navštíven.

Kromě přebíjení selektorů nemá moc smysl :link používat, stačí prosté:

a {color: red}
a:visited {color: blue} /* navštívené odkazy budou modré */
Vše
E:active
E:hover
E:focus

pseudotřídy uživatelských akcí

Element E (může být i jiný než odkaz).
:hover
Při najetí myší na element.
:active
Při kliknutí na element. Ve starších Explorerech funguje jako :focus
:focus
Pokud je element vybrán, například při kliknutí do formulářového pole.

Pro lepší uživatelský komfort bývá vhodné odkazy zvýraznit kromě :hoveru i při :focusu (popř. :active).

a:hover, a:focus, a:active {/* zvýraznění odkazu */}
Vše
E:focus-within Element E, ve kterém se nachází nějaký prvek, který má :focus.

Hodí se pro vytváření rozklikávacích nabídek nezávislých na JavaScriptu.

Mimo IE/Edge
Ukázka
E:target

pseudotřída zaměření

Element E, na který míří #kotva v adrese.
:target {color: red} /* element s kotvou při odkázání zčervená */
IE 9+
E:lang(cs)

jazyková pseudotřída

Potomek elementu s nastaveným atributem lang na cs.
<div lang='cs'>
      <p>Text <span>text</span>
</div>

Tento <span> podědí atribut lang a lze jej potom zaměřit a obarvit na červeno pomocí:

span:lang(cs) {color: red}

Domnívám se, že tento selektor nenabízí nic, co by nešlo udělat bez něj.

IE 8+
Ukázka
E:enabled
E:disabled

povolená/zakázaná pseudotřída

Tímto selektorem lze ovlivnit vzhled formulářových polí, která (ne)jsou zablokována atributem disabled.
input:disabled {color: red} /* zablokvaný <input> bude červený */
IE 9+, nejde v Opeře
Ukázka
E:checked

pseudotřída zaškrtnutí

Zachytí radio button nebo checkbox, který je vybrán, respektive zaškrtnut.
input:checked {background: red} /* zvolený <input> bude červený */

Opakem by měla být pseudotřída indeterminate, nicméně zatím nikde nefunguje. Lze využít negace :not(:checked).

S tímto selektorem lze v CSS vytvářet docela zajímavé věci.

IE 9+
Ukázka
E::first-line
E::first-letter

pseudoelement prvního písmena/řádku

První řádek/písmeno elementu E.
p::first-line {color: red} /* první řádek zčervená */
p::first-letter {color: blue} /* první písmeno zmodrá */

Zajímavé je, že s dvěmi dvojtečkami je zápis funkční až od IE 9 (ukázka), ale jen s jednou dvojtečkou funguje všude.

Všude
Ukázka
E::before
E::after

obsahové pseudo elementy

Slouží ke generování nového elementu před/za elementem E.

Lze tak například vygenerovat element určený k ukončení obtékání nebo generovat obsah vlastností content.

Kvůli podpoře ve starších IE je výhodnější používat zápis jen s jednou dvojtečkou.

/* přidá text „Nepřehlédněte“ před odstavce */
p:before {content: "Nepřehlédněte: "}

Nefunguje u některých elementů, které nemohou obsahovat text, jako <img>, <br> nebo <hr>.

IE 8+
E.trida
E#idecko

identifikátor vs. třída

Element E s třídou trida, respektive id idecko.

Z pohledu CSS mezi nimy není přílišného rozdílu (třída má menší váhu). Podle specifikací by ID mělo být unikátní a použitou pouze jednou, prohlížečům to je v CSS celkem jedno.

Jedno to není JavaScriptu při používání metody getElementById nebo při odkazování na #kotvy. Pro přehlednost a jistotu, že ID nebude kvůli JS použito vícekrát, je vhodné řešení, kdy CSS používá jen třídy. A identifikátory jsou jen pro JavaScript a kotvy na stránce.

.trida {color: red}
#idecko {color: blue}
<p class='trida'>Červený text
<p id='idecko'>Modrý text
Vše
E:not(s)

negace

Element E který nevyhovuje selektoru v závorkách not.

Nezaškrtnutý/nevybraný radio button/checkbox bude mít šedivé pozadí.

input:not(:checked) {background: grey}
IE 9+
E F

libovolný potomek

Element F, který je ve stromu dokumentu na větvi elementu E. Jinak řečeno element F má nějakého libovolně vzdáleného předka E.

Odkaz v nadpise bude červený:

h1 a {color: red}

Odkaz v seznamu bude modrý:

ul a {color: blue}

Taktéž by fungovalo:

ul li a {color: blue}

… ale je to zbytečně prodlužování.

Vše
E > F

přímý potomek

Element F je přímým potomkem elementu E.
li > span {color: red}

Obarví element <span> v kódu

<ul>
  <li><span>Text</span>
</ul>

Ale už ne <li><a href='#'><span>Text</span></a>, protože je mezi <li> a <spanem odkaz.

IE 7+
E + F

přímý sourozenec

Element F, který přímo následuje element E.
div + ul {color: red}

Obraví na červeno seznam, který bezprostředně sousedí s <div>em:

<div>Obsah</div>
<ul>
…
</ul>

Pokud mezi <div>em a seznamem bude nějaký jiný element, seznam se neobarví.

IE 7+
E ~ F

libovolný sourozenec

Element F, před kterým je někde ve stejné úrovni element E.

Narozdíl od selektoru přímého sourozence zachytí i seznam, který má před nějakým <div>em ve stejné úrovni libovolný počet jiných elementů.

IE 7+
:fullscreen E

fullscreen

Element E při zobrazení ve fullscreenu (režimu celé obrazovky).

Selektor :fullscreen by měl umožňit zvláštní styl v celo-obrazovkovém režimu. Zapisuje se s prefixy, ve Firefoxu a Chrome navíc se spojovníkem mezi „full“ a „screen“ — :-moz-full-screen, :-webkit-full-screen a :-ms-fullscreen.

Bohužel se mi tuto funkčnost nepodařilo v žádném prohlížeči spustit (kód pro FF). Nějaký popis :fullscreenu je na MDN.

IE 11+
E:indeterminate

indeterminate

Funguje jen u značek <input type=checkbox> a <progress>.

Má smysl pro vytváření třístavového checkboxu (Vybrat vše), kdy indeterminate znamená, že jsou zaškrtnuty jen některé položky.

Nastavit neurčitý stav je možné jen JavaScriptem.

document.getElementById("checkbox").indeterminate = true;
IE 9+
Ukázka
E:optional

optional

Funguje jen u značek <input>, které není povinné vyplnit, tj. nemají atribut required.

Opakem je selektor :required.

IE 10+
Ukázka
E:required

required

Funguje jen u značek <input>, které je povinné vyplnit, tj. mají atribut required.

Opakem je selektor :optional.

Pro zaměření políčka, které je správně/špatně vyplněno slouží selektory validace (:valid/:invalid).

IE 10+
Ukázka
E::placeholder

placeholder

Umožnuje stylovat obsah atributu placeholder (zástupný znak v <input>u).

IE 10+
Ukázka
E:read-only

read-only

Umožnuje stylovat <input> s atributem readonly, který je určen jen ke čtení.

<input readonly>

Zaměřit readonly element se ale dá i přes atributový selektor:

input[readonly] {}
Chrome, Firefox
Ukázka
E:read-write

read-write

Umožnuje zaměřit <input>, který nemá atirbut readolny.

Zajímavé je, že atribut disabled nevadí a takový <input> tedy selektor read-write zachytí.

Pro starší prohlížeče je možné použít atributový selektor s negací (IE 9+):

input[type=text]:not([readonly]) {}
Chrome, Firefox
Ukázka
E:default

default

Zaměří výchozí odesílací tlačítko. Hodí se v případě, že je ve formuláři více tlačítek (<input type=submit>/<button>).

Zvýrazněné bude to, které by se použilo při stiknutí Enteru.

Chrome, Firefox
Ukázka

Síla selektorů

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

CSS 3 selektory v IE 6, 7, 8

CSS 3 selektory ve starých IE

Doplnění podpory CSS 3 selektorů do starých prohlížečů pomocí JavaScriptu.

Označení externích odkazů

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

Selektory :valid a :invalid

CSS selektory :valid a :invalid

CSS selektory :valid a :invalid umí rozpoznat správně nebo špatně vyplněné formulářové políčko.

Komentáře