Moderní tvorba webových aplikací

O webu

Seznam všech CSS 3 selektorů

V CSS 3 je spousta selektorů, které s postupným mizením starších prohlížečů může dávat smysl znát.

CSS
CSS selektory
22 minut

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ů

Související články

Vložení CSS do stránky

Jakými všemi způsoby připojit CSS do stránky.

CSS
HTML
Zrychlování webu
9 minut

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

CSS
Formuláře
CSS selektory
UX
4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

CSS
Formuláře
UX
9 minut

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

CSS
Odkazy
UX
4 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025