Selektory

Selektory jsou základem CSS jazyka. Vždy přesně určují pro jaký prvek bude pravidlo v CSS určeno.

Prvek

Ke všem prvkům skupiny (odstavec, nadpis, ...) v HTML dokumentu přiřadí stejné vlastnosti. V příkladu níže přiřadí každému odstavci červenou barvu, text v odstavcích bude tedy červený, dále je nadpisu H1 přiřazena barva modrá a vlastnost podtržení nadpisu.

 p  {color: red;}
 h1 {
 color: blue;
 text-decoration: underline; 
 }

*

Hvězdička je zde zástupcem pro všechny prvky, a tak pokud použijete hvězdičku, jsou vlastnosti nastaveny všem prvkům v HTML dokumentu.

 *  {color: red;}

Identifikátor

Identifikátor se používá, pokud chcete v jednom případě na celé stránce změnit vlastnosti jednoho z prvků. Například budete chtít mit všechny odstavce zarovnané vlevo a jen jeden zarovnaný na střed, u tohoto odstavce tedy použijete identifikátor.

Identifikátor může být na rozdíl od třídy(níže) na stránce jen jeden, pokud chcete využít více stejných identifikátorů v jednom HTML dokumentu, použijte třídu.

Identifikátor se v CSS souboru uvozuje znakem "#" a v dokumentu se použije pomocí atributu id. Vše ukazuje následující příklad.

Definice v CSS

 #jedenjediny{
 text-align: center;
 }

Použití v HTML

 <p id="jedenjediny">
 Text v tomto odstavci bude zarovnaný na střed
 </p> 

Třída

Třída se využívá pokud chcete pro daný prvek (odstavec, nadpis) využít více pravidel. Například nadpis H1 v sekci CSS bude modrý a v sekci bude červený. Nebo tabulka pro výspis důležitých hodnot bude orámovaná a ostatní tabulky budou bez rámu.

Třída se může v HTML dokumentu objevit více krát, není vázaná jen na jeden objekt(ukázáno níže), takze pokud chcete oramovaný i nadpis, stačí přidat tomuto nadpis třídu, kterou jsme původně zamýšleli pro tabulku.

Třída se v CSS souboru uvozuje znakem "." (tečka).

Třída vázaná na prvek

Nelze použít s jinými prvky
Definice - nadefinovali jsme nadpis s jeho třídou

 h1.modry{
 color: blue;
 }
     
 h1.cerveny{
 color: red;
 }

Třída není vázána na prvek

Lze použít i na ostatní prvky
Definice - nadefinovali jsme jen třídu

 .modry{
 color: blue;
 }
  
 .cerveny{
 color: red;
 }

Použítí třídy v HTML dokumentu

 <h1 class="modry"> Nadpis bude modrou barvou</h1>

Vícenásobné třídy

Použítí více tříd pro jeden prvek se dá v HTML pomocí této syntaxe. Mezi vyjmenovanými třídami jsou mezery!

 <p class="prvni_trida druha_trida treti_trida">
 Na tento text je použito více tříd 
 </p>  

Kombinovaní selektorů

Používá se to v případech, kdy nám nestačí dřívější specifikace a chceme trochu automatickou změnu vlastností podle toho, kde se prvek nachází.

V následujícím případě si ukážeme, jak nastylovat odstavec, který následuje hned za nadpisem h1.

  h1 p{
    color:      blue;
    text-align: left;
    font-size:  14px;
  }

Dále zkusíme nastylovat odkaz umístěný v odstavci, který následuje za nadpisem h1. Není to nic těžkého, jen se do deklarace přidá "a".

 h1 p a{
   color:              blue;
   text-decoration:    underline;
 }

Zkrácený zápis

Aby se v CSS nemuselo vypisovat pro prvky se stejnými vlastnostmi pořád stejný kód, dá se zápis zkrátit.

Pro nadpisy h1-5 nadefinujeme stejné vlastnosti následujícím způsobem. Mezi jednotlivými prvky musí být znak "," (čárka).

 h1, h2, h3, h4, h5{
   text-align:      left;
   text-decoration: none;
 } 

Rozšířené vlastnosti

CSS verze 2.1 nabízí několik rozšířených vlastností, které v některých situacích příjdou vhod.

pseudotřída	kdy se uplatní vlastnosti?
hover	pokud je myš nad objektem
link	pokud je odkaz dosud nenavštíven
visited	pokud je odkaz navštíven
focused	pokud je odkaz zaměřen tabulátorem
active	pokud se na odkaz právě kliklo
first-child	pokud je prvním prvkem v rodičovském prvku
first-line	pokud je prvním řádkem prvku
first-letter	pokud je prvním písmenem prvku

Použití v CSS

 a:hover{
   color: red;
 }
 
 p:first-letter{
   size: 14px;
 }