CSS pseudo-třídy

Kromě CSS tříd, které sami definujete v HTML, můžete použít i pseudo-třídy, které jsou definované CSS2 a CSS3 specifikací a mají své speciální významy, které se odvíjí od obsahu HTML nebo akcí, které uživatel provádí.

Odkaz

Nejstarší a nejznámější jsou třídy pro ovládání odkazů. Třída :link označuje kotvu (anchor neboli tag A), který má uvedený HREF atribut. Stejně by se tedy dal použít selektor a[href]. Druhá třída je pak :visited, která označuje odkaz, který byl již někdy navštíven.

V moderních prohlížečích může být použití těchto tříd omezeno a často lze změnit jen barvu, podtržení nebo barvu pozadí – více viz článek o navštívených odkazech.

S odkazy souvisí ještě třetí, méně známá, třída :target. Ta označuje prvek, jehož ID je uvedeno v URL v hashi (#). To se často používá ke zvýraznění odstavce, na který se uživatel odkázal, ale použít se dá třeba i k zobrazení popup dialogu bez použití javascriptu.

Aktivní prvky

Aktivními prvky může být odkaz, na který uživatel klikl, textové pole, do kterého uživatel píše nebo checkbox, který zaškrtl.

Jako první přichází na řadu třída :hover, která se aktivuje v okamžiku, kdy uživatel na prvek najede myší nebo jiným ukazatelem (perem, joystickem, apod.). Z toho vyplývá, že nemá příliš význam u dotykových displejů a neměl by tak přinášet nějakou důležitou informaci (např. zobrazení nějaké důležité části stránky). Měl by být použit pouze ke grafickému zlepšení UX (např. interakce s menu) a nebo by měl mít alternativu (nejvhodnější je to samé, co provede :hover, udělat i po kliku, aby i mobilní uživatelé dosáhli stejného výsledku).

Když uživatel klikne, aktivuje se třída :active, která je účinná po celou dobu, co uživatel trží tlačítko myši nebo prst na obrazovce. Po dokončení kliku pak opět zmizí a dá se tak dobře použít pro zvýraznění nebo animaci kliku. Třída :active se také aktivuje, pokud uživatel najede na prvek klávesnicí (šipky nebo tabulátor) a následně stiskne mezerník nebo Enter (příp. jinou klávesu specifickou pro daný systém – na starých mobilech s joystickem nebo skrolovací dotykovou plochou to byl právě stisk joysticku nebo dotykové plochy).

Poté, co přestane účinkovat třída :active se aktivuje další :focus, která označuje prvek, který je zrovna vybraný a bude přijímat vstup z klávesnice. Fokus může prvek získat kliknutím myši, stisknutí prstem nebo najetím pomocí TAB na klávesnici.

U checkboxu, radio a nebo option v selectu se aktivuje třída :checked u prvku, který je zaškrtnutý (checkbox) nebo zvolený (radio a option). To lze využít k označení vybrané položky nebo k zobrazení dalšího obsahu pomocí selektoru + (následující prvek):

form#adresa-doruceni { display: none; }
#checkkbox-jina-adresa-doruceni:checked
  + form#adresa-doruceni { display: block; }
/* automaticky zobrazí formulář po
   zaškrtnutí checkboxu */

Opačná třída :indeterminate se aktivuje na checkboxu, radiogroup nebo selectu, pokud nemá zvolenou výchozí hodnotu (u checkboxu je to atribut indeterminate=true, u ostatních pak nepřítomnost atributu selected). Některé prohlížeče ale mohou výchozí hodnotu vybrat sami a tak se nemůžete na tuto třídu spoléhat nebo může být potřeba zásah javaskriptem pro vymazání výchozí hodnoty.

Formuláře

Kromě již uvedených :focus a :checked můžete ve formuláři použít i další pseudo-třídy.

Třída :default odpovídá tlačítku, které se aktivuje po stisku Enter. Zpravidla to je první tlačítko Odeslat (input[type=submit]) ale tato pseudo-třída je univerzálnější a může reagovat i na jiné speciální situace. A měla by být rychlejší, protože prohlížeč nemusí ověřovat ostatní podmínky selektoru.

Třída :disabled má stejný význam jako selektor [disabled], ale je o něco rychlejší při vyhodnocování. Opačná třída :enabled pak platí pro všechny prvky, které nemají atribut disabled (:not([disabled])) a je opět rychlejší než ostatní kombinované selektory. Obdobně fungují i třídy :read-only a :read-write, které sledují atributy readonly u inputů a contenteditable u ostatních prvků.

Pro validaci formuláře můžete použít třídy :required, která odpovídá prvku s atributem required (selektor [required]). Opakem je pak třída :optional, která platí pro všechny ostatní prvky.

Pro označení správnosti hodnoty slouží třídy :valid a :invalid, které ale mají význam jen u automaticky validovaných inputů jako je number, url, email, apod.

Pro input typu number pak můžete použít pseudo-třídu :in-range, která bude aktivní jen v případě, že prvek obsahuje (validní) hodnotu mezi min a max hodnotami. Tato třída má význam jen pokud jde do pole psát na klávesnici – poskytnutými šipkami by totiž nikdy hodnota neměla povolené hranice opustit. Opačná třída :out-of-range pak nahrazuje selektor :not(:in-range).

Sporadicky podporovaný je pak selektor ::placeholder, který lze použít u inputů pro formátování textu placeholderu. Ve Firefoxu je potřeba použít prefix ::-moz-placeholder a pro webkit a IE10 je dokonce potřeba použít :-webkit-input-placeholder a :-ms-input-placeholder (s jednou dvojtečkou).

Prvky na stránce

Další sada pseudo-tříd reaguje na různé situace v HTML a má tak význam jen pro kód generovaný na serveru nebo v javaskriptu (pokud píšete HTML ručně, zpravidla můžete dopsat i příslušné CSS třídy nebo ARIA atributy).

Základní třída :root odpovídá hlavnímu prvku na stránce, což je <HTML> v HTML stránce, ale může to být i jiný, pokud označuje část SVG obrázku nebo jiného XML kódu. Rozdíl je v tom, že selektor html je tag a má tedy menší prioritu než selektor třídy :root.

Pseudo-třída ::selection (se dvěma dvojtečkami) odpovídá části stránky, která je vybrána (označena). Můžete tak změnit barvu textu a pozadí výběru.

Pořadí prvku

Následuje skupina tříd, které vybírají prvky podle jejich pozice v HTML. Třídy :first-child a :last-child vybírají vždy první a poslední prvek v daném kontejneru. Třídy :first-of-type a :last-of-type pak vybírají první a poslední prvek daného typu. Pokud tedy máte v odstavci SPANy, EMy a STRONGy, selektor „p *:first-of-type“ vybere tři prvky v každém odstavci – první SPAN, první EM a první STRONG.

Trochu složitější alternativy jsou :nth-child, :nth-last-child, :nth-of-type a :nth-last-of-type, které místo prvního či posledního mohou vybrat libovolný prvek nebo i více prvků na základě jejich pořadí v kontejneru. To se vždy uvádí do závorek za pseudo-třídu:

:nth-child(2) { /* druhý prvek */ }
:nth-child(5) { /* pátý prvek */ }
:nth-child(2n) {
    /* každý druhý, 2., 4., 6., atd. */ 
}
:nth-child(n+5) {
    /* všechny počínaje pátým, 5., 6., 7., atd */
}
:nth-child(-n+5) }
   /* prvních 5, tedy 1., 2., 3., 4. a 5. */
:nth-child(2n+5) {
    /* každý druhý počínaje pátým, 
       tedy 5., 7. 9, 11., atd. */
}
:nth-child(odd) { /* liché prvky */ }
:nth-child(even) { /* sudé prvky */ }
:nth-child(n+4):nth-child(-n+8) {
    /* čtvrtý až osmý prvek,
       tedy 4., 5., 6., 7., a 8. */
}
:nth-child(2n+4):nth-child(-2n+8) {
    /* každý druhý mezi čtvrtým a osmým prvkem,
       tedy 4., 6. a 8. */
}
img:nth-of-type(2n) { /* každý druhý obrázek */ }

Slova even (sudý) a odd (lichý) jsou jen náhražky za matematicky vyjádřené 2n (každý druhý) a 2n+1 (každý druhý počítáno od prvního).

Selektory *-of-type dávají větší význam u těchto počtů, kde např. můžete označit každý druhý label, i když máte kombinace label + input a checkbox + label a nelze tedy spoléhat na to, že label bude vždy lichý nebo sudý prvek v kontejneru.

Selektory *-last-* vždy jen obrací počítání od posledního prvku, všechny ostatní výpočty zůstávají stejné.

Pozor na to, že pro výpočet pořadí se uvažují i skryté prvky, takže pořadí „každý druhý“ nebude fungovat správně, pokud je třetí prvek skrytý a pro uživatele bude zvolený 2., 3., 5., atd. (protože viditelný třetí je ve skutečnosti čtvrtý, atd.).

Někde můžete najít ještě zápis se záporným posunem. např. 2n-3, ale to je jen jinak zapsaný matematický vzorec (např. 2n-3 odpovídá 2n+1) a dost často ani nefunguje správně.

Počet prvků

Další skupina pseudo-tříd se zaměřuje na počet prvků v kontejneru. Třída :empty (prázdný) platí je pro prvky, které nemají žádné potomky. Pozor na to, že i prvek, který obsahuje mezeru, není prázdný! První, co vás asi napadne, je takový prvek skrýt, pokud jde třeba o prázdný kontejner pro obrázky nebo prázdný seznam uživatelů.

Pokud kontejner obsahuje jen jeden prvek, daný prvek bude mít pseudo-třídu :only-child. Pokud má kontejner více prvků, ale jen jeden daného typu (např. SPAN), bude mít takový prvek třídu :only-of-type. Opět se hodí pro označení seznamu, který má jen jeden prvek a tedy není třeba řešit např. rozestup mezi prvky. Nebo můžete takový obrázek zobrazit na celou šířku místo počítání procentuální šířky.

Pokud potřebujete určit styl pro prvky, jichž je víc v kontejneru, můžete k tomu použít třídy :nth-child a :nth-last-child. Pokud jsou totiž v kontejneru např. 3 prvky, znamená to, že první prvek je zároveň 3. od konce a naopak 3. prvek je 1. od konce. Díky tomu můžete např. nastavit šířku prvků podle jejich počtu:

.gallery > img:nth-child(1):nth-last-child(1) {
   width: 100%; /* styl pro 1 prvek */
   /* uvedeno pro úplnost, stejně lze použít
      třídu :only-child */
}
.gallery > img:nth-child(1):nth-last-child(2),
.gallery > img:nth-child(2):nth-last-child(1) {
    width: 50%; /* pro 2 prvky */
}

.gallery > img:nth-child(1):nth-last-child(2),
.gallery > img:nth-child(2):nth-last-child(1) {
    width: 50%; /* pro 2 prvky */
}

.gallery > img:nth-child(1):nth-last-child(3),
.gallery > img:nth-child(2):nth-last-child(2),
.gallery > img:nth-child(3):nth-last-child(1) {
    width: 33.333%;
    width: calc(100% / 3); /* pro 3 prvky */
}

/* atd. */

Pro větší počty prvků v kontejneru můžete použít vylepšení od Lea Verou, které využívá selektor sourozenců (~):

.gallery 
  > img:first-child:nth-last-child(10),
.gallery 
  > img:first-child:nth-last-child(10) ~ img {
    width: 10%; /* pro 10 prvků v kontejneru */
}

Ještě lepší zápis by byl pomocí SASS nebo LESS, kde můžete použít cyklus, abyste nemuseli psát vše ručně:

/* SCSS zápis pro 1 až 10 prvků */
.gallery {
  @for</span> <span class="variable">$i</span> <span class="identifier">from</span> <span class="number">1</span> <span class="identifier">through</span> <span class="number">10</span> {
    <span class="identifier">img</span><span class="symbol">:<span class="identifier"><span class="keymethods">first</span></span></span>-<span class="identifier">child</span><span class="symbol">:<span class="identifier">nth</span></span>-<span class="identifier"><span class="keymethods">last</span></span>-<span class="identifier">child</span>(<span class="comment">#{$i}),</span>
    img<span class="symbol">:<span class="identifier"><span class="keymethods">first</span></span></span>-<span class="identifier">child</span><span class="symbol">:<span class="identifier">nth</span></span>-<span class="identifier"><span class="keymethods">last</span></span>-<span class="identifier">child</span>(<span class="comment">#{$i}) ~ img {</span>
      <span class="identifier">width</span><span class="symbol">:</span> <span class="regexp">#{100/$i}%
    }
  } /* for */
} /* .gallery */

Dodané prvky

Pomocí CSS můžete ve stránce vytvářet i nové prvky a to pomocí CSS2 selektorů :before a :after nebo jejich CSS3 alternativ se dvěma dvojtečkami ::before a ::after (mají stejný význam, ale CSS2 verze je lépe podporována na starých prohlížečích). S těmito pseudo-třídami souvisí CSS atribut content, pomocí kterého dáte prvku obsah a donutíte ho zobrazit se ve stránce.

Text

Na pořadí textu místo pořadí prvků cílí třídy :first-letter a :first-line, které můžete opět psát se dvěma dvojtečkami v CSS3, tedy ::first-letter a ::first-line.

Třída :first-letter funguje na všechny prvky, které obsahují text, dokonce i na dodané prvky :before a :after. Třída :first-line ale funguje jen na blokové prvky (DIV, P, H1, atd.) a nemá účinek u inline prvků (SPAN, EM, STRONG, atd.).

Text také můžete ovlivnit pseudo-třídou :lang(), která se nastavuje podle kombinace meta a lang atributů. Např. označit cizojazyčné výrazy lze kombinací HTML a CSS:

<meta http-equiv="Content-language" content="cs">
Pro <span lang=en>layout</span> stránky je nejdůležitější <span lang=de>gestalt</span> pravidlo a <span lang=jp>boken</span> pozadí.
:lang(cs) { color: black; }
:lang(en) { color: red; }
:lang(de) { color: blue; }
:lang(jp) { color: green; }

Poznámka: layout je rozložení stránky, pravidlo gestalt (z němčiny „tvar“) se týká podobnosti a rozdílnosti prvků na stránce (např. všechny inputy musí vypadat stejně). Výraz bokeh (暈け, často též ボケ, z japonštiny „rozmazané“) označuje nevýrazné, nekontrastní (a často, hlavně ve fotografiích, skutečně rozmazané) pozadí (tedy pozadí, na kterém vyniknou důležité prvky stránky).

Dalšího vylepšení může dosáhnout kombinací :lang s pseudo-třídami :before a :after a vlastnosti content a uvést tak cizojazyčné výrazy do uvozovek (např. anglické do „uvozovek“, německé do »šipek« a japonské do 「japonských uvozovek」).

Negace

Poslední třída je :not(), která obrací význam selektoru, který je uveden v závorkách. Tím může být ID (:not(#menu)), třída (:not(.listitem)), jiný selektor (:not([selected])) nebo i jiná pseudo-třída (:not(:default)).

Pamatujte ale na to, že některé pseudo-třídy již mají svůj opak (:required a :optional, :first-child a :nth-child(n+2), atd.), které jsou rychlejší a často i čitelnější (tedy kromě :not(:first-child)).

U normálních selektorů pak některé kombinace nemusejí dávat smysl, např. #menu:not(#page) nemůže mít dvě ID, nebo div:not(span), protože žádný prvek nemůže mít dva typy.

Na druhou stranu uvedením nesmyslných podmínek můžete zvýšit prioritu pravidla, např. #menu:not(#page) obsahuje dvě ID a proto má vyšší prioritu než obyčejné pravidlo #menu a je rychlejší než uvádění cesty html > body#page > #menu.

Podpora

Podpora v prohlížečích je u některých stoprocentní (jako :link a :focus), některé jsou jen u novějších (:before a :nth-child), nebo vyžadují prefixy (třeba :-moz-selection) nebo dokonce jiné názvy (:placeholder nebo :-*-input-placeholder). Některé zatím podporovány nejsou, jako třeba :fullscreen a ::backdrop

Omezený styl

V některých prohlížečích funguje speciální selektor :scope, který ale není přesně specifikovaný a tak se může měnit. Slouží k omezení CSS stylu uvedeného přímo v HTML na daný kontejner, ve kterém je uveden:




<div>

Tento text bude normální
</div>


<div>


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20scoped%3E%0A%20%20%20%20%20%20%20%20p%3Ascope%20%7B%20font-weight%3A%20bold%3B%20%7D%0A%20%20%20%20%20%20%20%20div%3Ascope%20%7Btext-align%3Acenter%3B%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

    Tento text bude tučný centrovaný

</div>



Třída :scope má význam jen u tagu style označeného atributem scoped a platí vždy na nejbližšího rodiče odpovídající zbytku selektoru. Odpovídá tedy jQuery metodě closest():

$('style').closest('selektor').css({ /*styl*/ });

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *