Garth

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




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML