CSS Tutoriál XIII. – Selektory

Selektory v CSS jsou značky pomocí nichž vybíráme různé prvky nebo skupiny prvků na stránce. Můžeme pro toto používat třídy a identifikátory, ale občas potřebujeme jednodušší selekci prvků nebo naopak pro komplikovanější prvky komplikovanější deklarace.

Kromě složených deklarací pomocí tříd a identifikátorů, které jsme si ukazovali v tutoriálu třídy a identifikátory, můžeme použít také matematické značky a nebo další selektory. Jedním z nejjednodušších selektorů je selektor *, který vybere všechny elementy na stránce. Další matematická značka, kterou používáme je +, která vybírá element, který jde těsně za nějakým jiným elementem. Tedy například div+p vybere všechny odstavce, které jsou přímo za sekcí. Předcházející prvek můžeme také vybrat pomocí ~. Pokud chceme tedy například označit všechny ul, které předchází p, napíšeme p~ul.

Lze také vybrat prvky podle určitého atributu a nebo jeho hodnoty. Pokud tedy chceme vybrat všechny obrázky, u kterých je nastavený alternativní popisek (alt), napíšeme img[alt]. Používáme tedy hranaté závorky []. Pomocí nich můžeme vybrat i atributy, které nabývají určité hodnoty. Tedy pokud chceme vybrat například obrázek, jehož alternativní popisek je „obrázek kočky a psa“, napíšeme img[alt=“obrázek kočky a psa“]. Všechny deklarované vlastnosti se budou vázat k tomuto obrázku. Pomocí hranatých závorek můžeme také vybrat prvek, jehož hodnota obsahuje nějaké slovo. To se hodí zejména pro titulky. Pokud chceme vybrat všechny titulky, které obsahují slovo HTML, napíšeme do stylu  [title~=“HTML“].

Z hlediska odkazů můžeme využít výběr podle začátku adresy nebo jejího konce (třeba u odkazů na .pdf nebo jiný dokument). Výběr adres, které začínají například „https“ bychom zapsali takto a[src^=“https“]. Výběr odkazů, které mají zakončení třeba .css bychom vybrali takto: a[src$=“.css“]. Pokud chceme třeba jinak zabarvit odkazy, které nám odkazují na specifickou stránku, pak můžeme použít selektor, který vybírá odkazy podle řetězce, který obsahují. Pokud tedy chceme vybrat všechny odkazy na stránku htmlkody.info, použijeme a[src*=“htmlkody“]

Tímto vyčerpáváme selektory jako samotné a otevíráme kapitolu pseudo-selektorů. Pseudo-selektory proto, že nám specifikují prvek v takové pozici, v jaké není zapsaný v zdrojovém kódu a umožňují nám tedy s ním hýbat novým způsobem. Jako příklad si můžeme uvést pseudo-selektory, které používáme u odkazů. Ty jsou nejčastější a setkáme se s nimi nejvíce.

Jde o selektory :link, :active, :visited, :hover a :focus. Zapisujeme je hned za element, který chceme upravit, tedy způsobem a:hover. A k čemu nám tedy slouží? a:link vybere všechny aktivní odkazy – ty, které jsou otevřené. a:visited vybere všechny navštívené odkazy. :hover můžeme použít i u jiných prvků, specifikuje totiž prvek při přejetí myší. Často se však nahrazuje pomocí javascriptu – onmouseover, který nabízí více možností. Pseudo-selektor :focus zase vybere ten prvek, který je v zaostření. Dalším novým selektorem ohledně odkazů je :target. Pokud odkazujeme na nějakou sekci textu, deklarace za :target nám říká, jak bude sekce po kliknutí na odkaz vypadat.

Další pseudo-selektory se týkají textu. Zejména zde využijeme výběr prvního písmene, prvního řádku a tak dále. První písmeno nějakého textu vybereme pomocí pseudo-selektoru :first-letter. Zápis by tedy vypadal nějak takto p:first-letter {color:blue;}. Stejně tak bychom mohli zapsat první řádek pomocí :first-line.

Teď přichází poslední podkapitola pseudo-selektorů a to jsou selektory, které se týkají rodičovských prvků a jejich dětí. Rodičovským elementem většinou chápeme nějakou sekci, která obsahuje více odstavců, obrázků a tak dále – > dětí. Pro výběr těchto prvků můžeme zjednodušeně použít selektory z CSS3. Jsou to zejména :first-child, který vybere prvek, který je prvním dítětem. Pokud tedy máme sekci

<div>
<img src="obrazek.jpg"></img>
<img src="obrazek2.jpg"></img>
<p>text</p>
<p>text2</p>
</div>

a použijeme selektor img:first-child, vybere nám pouze první obrázek a nic dalšího. Jeho opakem by mohl být :last-child, který vybere poslední dítě rodičovského elementu. Například zápis p:last-child by vybral všechny odstavce, které jsou posledními dětmi rodičovského elementu. Na příkladu naší sekce si můžeme ukázat také další selektory. Selektorem :first-of-type vybíráme první dítě svého druhu. Pokud tedy vybereme tedy p:first-of-type, ovlivníme pouze první odstavec „text“ a nikoli druhý. Naopak pokud napíšeme p:last-of-type, vybereme pouze druhý a nikoli první. Dávejte si pozor, že všechny tyto selektory vybírají všechny elementy na stránce a ne pouze to místo, které chcete upravit. Pokud chcete upravovat pouze specifické místo, musíte být specifičtí i v samotné deklaraci – například přidat třídu nebo identifikátor.

Nespecifičnost ale můžeme uplatnit například u pseudo-selektoru :only-child, který vybírá pouze elementy, které jsou ve svém rodičovském elementu jediné. Důležitý je také selektor :only-of-type, který vybere všechny děti, které jsou v rodičovském elementu jediné svého typu.

Můžeme také specifikovat kolikáté dítě máme na mysli. A to pomocí :nth-child(n). Místo „n“ v závorce doplňujeme číslo. Pokud chceme třeba vybrat všechny obrázky, které jsou druhé v rodičovském elementu, zapíšeme img:nth-child(2). Pokud chceme počítat druhý obrázek odzadu, použijeme img:nth-last-child(2). Stejně můžeme zacházet i s typem elementu. Například druhé dítě typu img, bychom zapsali jako img:nth-of-type(2). Druhé odspoda img:nth-last-of-type(2).

Další typy pseudo-selektorů jsou například selektor :root, který vybere všechno na stránce – vybere kořen stránky. Dalším příkladem je například pseudo-element :empty. Pokud zapíšeme p:empty, vybereme tím všechny odstavce, které neobsahují žádné jiné prvky. Poté můžeme mít selektory, které nám vkládají nějaký obsah před nebo za element. Jsou to selektory :before a :after. Deklarujeme je většinou pomocí vlastnosti content. Například tedy p:before {content: url(obrazek.png)} Znamená to, že před každý odstavec se vloží obrázek.

Jiný typ pseudo-selektorů využíváme zejména u seznamů. Pomocí :checked vybíráme zaškrtlá políčka. Nejčastěji bude tedy syntax input:checked. Stejně tak můžeme zvolit input:enabled, pro všechny povolené možnosti, nebo input:disabled pro všechny nepovolené možnosti.

Můžeme také vybrat pomocí negace – vybrat všechny elementy kromě těch, které jsou v nějakém prvku. Tak vybíráme pomocí :not. Všechny prvky, které nejsou v p, vybereme takto: :not(p). Také můžeme vybrat části prvku, které jsou označené uživatelem pomocí selektoru ::selection (dvě dvojtečky nejsou chyba, takto se zapisuje). Vybraný text má pak například jinou barvu.