O webu
    CSS 3 selektory

    Seznam všech CSS 3 selektorů

    CSS , CSS selektory

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

    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ářů ↓

    Podobné stránky

    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.

    Vývojářské nástroje v prohlížečích

    Nástroje pro vývojáře v prohlížečích

    Pro testování a ladění webu existují (nebo je lze snadno doplnit) ve všech rozšířených prohlížečích vývojářské nástroje.

    Filtrování dat v CSS

    Jednoduché filtrování dat v čistém CSS

    Při filtrování malého množství položek si lze od Internet Exploreru 9 vystačit jen s CSS.

    Komentáře

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