Základy CSS

Selektory

Selektor je první část pravidla. Určuje, kterých elementů na stránce se pravidlo týká.

Ukážeme si šest nejpoužívanějších. V náhledu vidíte jídelníček, který s nimi nastylujeme.

Selektor · 1

Podle elementu

Nejjednodušší selektor je název tagu. Vybere všechny elementy toho druhu na stránce.

Šedé jsou oba odstavce, úvodní i poznámka dole.

Selektor · 2

Podle třídy

Chceme zvýraznit jen některá jídla. Dáme jim v HTML atribut class a v CSS je vybereme tečkou a názvem třídy.

Třídu může mít libovolně mnoho elementů. Jeden element může mít i víc tříd, oddělených mezerou: class="special new".

Selektor · 3

Podle id

Atribut id je jedinečný, na stránce smí být jen jednou. V CSS ho vybereme mřížkou #.

Ve stylech dávejte přednost třídám. id se hodí pro odkazy na místo stránky a pro JavaScript.

Selektor · 4

Uvnitř jiného elementu

Dva selektory oddělené mezerou znamenají „uvnitř“. .menu li vybere jen položky seznamu, které jsou v elementu s třídou menu. Jiné seznamy na stránce zůstanou, jak jsou.

Samotnému seznamu .menu navíc vypneme odrážky a padding.

Selektor se čte zprava: vyber li, ale jen takové, které má někde nad sebou .menu.

Selektor · 5

Víc selektorů najednou

Když mají mít různé elementy stejný styl, nemusíme pravidlo opakovat. Selektory oddělíme čárkou.

Čárka znamená „a také“. Mezera znamená „uvnitř“. Jeden znak, úplně jiný význam.

Selektor · 6

Podle atributu

Do hranatých závorek napíšeme atribut a jeho hodnotu. Tady vybereme odkazy, jejichž adresa končí na .pdf.

$= znamená „končí na“, ^= „začíná na“ a samotné = „je přesně“. Například input[type="email"].

Responzivita

Selektor uvnitř @media

Selektory fungují stejně i uvnitř podmínky pro šířku obrazovky. Na telefonu dáme položkám jídelníčku víc místa, aby se do nich dobře trefil prst.

Platí jen padding. Border z původního pravidla zůstává, protože ho tu nepřepisujeme.

Shrnutí

Šest selektorů

• p: všechny elementy p
• .special: elementy s třídou special
• #note: element s id="note"
• .menu li: li uvnitř .menu
• h1, .intro: obojí
• a[href$=".pdf"]: podle atributu

Hvězdička * vybere úplně všechno. Selektory pro stav, například hover nad prvkem, najdete v lekci o pseudotřídách.

Další: Kaskáda a dědičnost →