CSS selektory 2.čá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 tomto článku zmíním zajímavou selekci za pomoci více selektorů jednoho prvku zároveň.

Základem tohoto článku je rozpoznat rozdíl mezi

#hlavicka.nazev_divu {  }

a

#hlavicka .nazev_divu { }

Na první pohled se tyto dva selektory tváří stejně respektive, že ten první je možná napsán s chybou. Chyba to není, ale naopak to je velmi důležitá změna. Pokusím se to vysvětlit na názorné ukázce co který ze zápisů provede.

#hlavicka.nazev_divu {  }

//význam je
tento element

zatímco

#hlavicka .nazev_divu { }

//význam je

  
tento element

Z výše zmíněného příkladu plyne, že lze selektovat i prvky které mají více tříd a nejsme omezeni selektovat pouze potomky, prvky s daným id, či elementy které mají mezi svými třídami právě jednu. Tudíž tyto selektory lze dobře použít v "objektově orientovaném CSS", kdy máte jednu třídu co má základní prvky skupiny elementů a nějaká další třída jí přidává vlastnosti "navíc" a takových tříd je hned několik.

Komplexní případ užití může být například tento:

//HTML část
1
2
3
4
5
6
7

//CSS část
.box { width: 100px; height: 100px; float: left; margin: 0 10px 10px 0; font-size: 30px; color: black; }
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.border { border: 5px solid black; }

Výsledek je 7 obyčejných bloků, kdy některé mají okraj a jiné ne. Pokud chceme změnit barvu okraje bloku s třídou ".red", tak nemůžeme upravit třídu ".border" jak tam tedy tu červenou dostaneme? Cesty jsou 2.
1) přidáme další třídu, která okraj přebarví.
2) použijeme téma této kapitoly a to selektor

.red.border { border-color: yellowgreen; }

Ukázka posledního příkladu zde

<< zpět