CSS selektory 1.část

Jak volit elementy stránky?

Pro správné nastylování stránky je nutné dokázat přesně specifikovat jaký element má dostat jaké styly. V článku je souhrn jak dané prvky specifikovat. Není zde pouze id/třída/tag, ale i velmi zajímavé obraty které ušetří řádky v PHP či Javascriptu a je tedy dobré je znát.

Vhodné je používat jednu třídu například pro více totožných prvků (Př.: udělám si třídu "nadpis", která dostane nějakou barvu, velikost, odsazení a tu budu používat po celém webu = všude bude design stejný a případná změna se mi propíše po celém webu což je dobře). Stylovat dle "id" není příliš vhodné, protože atribut "id" by měl být na webu unikátní. Stylovat přímo tagy je také nutné, alespoň "základně" z důvodu, že Vám klient do nějakého editoru může napsat nějaký tag a proč jej nemít předstylovaný. Každopádně pak se Vám může "potkat" styl z nějaké třídy a právě z tagu, tudíž je nutné s tím počítat.

//CSS část
h1 {...} //nazev tagu
.trida {...} //jednotna trida u vice tagu
#id_prvku {...} //práve jeden prvek s timto "id"

//HTML část (pouziti)

  
...
  
...

Dále lze určovat cíl "selekce" i hlouběji ve struktuře webu. Využijeme předchozího postupu.Můžeme vyselektovat obal a prvky právě v něm. Výhodou je, že neovlivníme například všechny "h2" na stránce, ale pouze ty které máme v nějakém bloku.

//CSS část
.obal h2 {...}

//HTML část (pouziti)
Tento nadpis nebude vybrán

  
Tento nadpis bude vybrán
  

    
I tento nadpis bude vybrán
  

Toto cílení na potomky lze ještě přesněji specifikovat na přímé potomky daného bloku.

//CSS část
.obal > p {...}

//HTML část (pouziti)
nebude zvolen

  
Pouze tento paragraf bude zvolen
  

    
nebude zvolen
  

Cílit lze i na "sourozence" tedy na prvky na stejné úrovni. Oba prvky musí mít stejný rodičovský element.

//CSS část
h2 ~ p {...} //najdi všechny tagy "p", které následují za tagem "h2" a mají stejného rodiče (v případě níže to je div s třídou "obal" )

//HTML část (pouziti)
...

  
...
  
...
  
Tento paragraf bude vybrán
  

    
...
  
  
Tento paragraf bude vybrán

Cílení na sourozence daného prvku lze opět více specifikovat na přímé sourozence.

//CSS část
h2 + p {...} //najdi všechny tagy "p", které následují ihned za tagem "h2" a mají stejného rodiče (v případě níže to je div s třídou "obal" )

//HTML část (pouziti)
...

  
...
  
...
  
Tento paragraf bude vybrán
  

    
...
  
  
...

Prvky lze vybírat i dle jejich atributů (name, target, id, class, type, href atd..)

//CSS část
a[target] {...}

//HTML část (pouziti)
...

Opět nemusíme cílit pouze na to zda má atribut, ale i to co daný atribut obsahuje. To se velmi hodí u stylování formulářových prvků. V příkladu ponecháme práci s odkazem.

//CSS část
a[href="http://google.com/"] {...}

//HTML část (pouziti)
...

Pokud nám stačí zda obsahuje jen část řetězce tak je to takto:

//CSS část
a[href*="login"] {...}

//HTML část (pouziti)
...

Pokud má začínat daným řetězcem tak takto:

//CSS část
a[href^="https://"] {...}

//HTML část (pouziti)
...

Pokud končit daným řetezcem, tak takto.

//CSS část
a[href$=".pdf"] {...}

//HTML část (pouziti)
...

Volba prvků může být i dle "pseudotříd"

//CSS část
a:link {...} //odkaz
a:visited {...} //odkaz na ktery bylo kliknuto
a:hover {...} //najeti mysi na odkaz
a:active {...}
a:focus {...}
input:enabled {...}
input:disabled {...}
input:checked {...}
li:first-child {...} //pouze prvni tag "li"
li:last-child {...} //pouze posledni tag "li"
li:nth-child(3n) {...} //každý 3 tag "li" v pořadí (3,6,9,..)
li:nth-child(2n+3) {...} // selektuje 3,5,7,9 atd...
li:nth-child(-n+4) {...} // selektuje 4,3,2,1,0
div:empty {...} //vyber pouze zcela prazdy tag "div"
div:not(.trida) {...} //vyber pouze div, který nemá třídu "trida"
:not(div) {...} //vyber vše co není tag "div"

Volit lze i první řádek či první písmeno v nějakém bloku

//CSS část
.prvni:first-letter,
.druhy:first-line {
  color: #00FF00;
  font-size: 20px;
}

//HTML část (pouziti)
Lorem ipsum dolor...
 //bude obarvene pismeno "L"
Integer eget
enim...
 //bude obarveno "Integer eget"

<< zpět