PC-politika.cz - Novinky: CSS: Selektory v CSS 3 PC-politika

CSS: Selektory v CSS 3

Je nejvyšší čas pamatovat na nejnovější veri Kaskádových stylů CSS 3. Byla totiž již vydana a většina prohlížečů, jako Mozilla Firefox, Opera a také IE 9, tuto nejnovější verzi již podporují. Je to např. nová implementace CSS selektorů. Pokud tedy CSS 3 selektory nyní nastudujeme, udržíme si určitý náskok pro plošné používání CSS 3 va dalších prohlížečích.

Je nejvyšší čas pamatovat na nejnovější veri Kaskádových stylů CSS 3. Byla totiž již vydana a většina prohlížečů, jako Mozilla Firefox, Opera a také IE 9, tuto nejnovější verzi již podporují. Je to např. nová implementace CSS selektorů. Pokud tedy CSS 3 selektory nyní nastudujeme, udržíme si určitý náskok pro plošné používání CSS 3 va dalších prohlížečích.

Nová verze CSS 3 zavádí částečnou shodu řetězců v atributech. To nám dává větší pružnost. K dispozici jsou tři nové atribut selektorů. My si dnes všimneme podle specifikace W3C 5.6 Child selectors.

Zde máme klasický zápis selektorů, známy ze starších verzí CSS. Jde o selektory: h1, em

h1 { color: red }
em { color: red }

A nyní se podíváme na nový zápis selektoru, který obsahuje navíc tzv. dítě. Dítě selektoru tvoří nějaký prvek. Dítě se může skládat i ze dvou či více selektorů, oddělených znakem/kombinátorem „větší“: ">". Takže naše první pravidlo nastavuje styl všech prvků P, které jsou dítětem tagu/elemntu body:

body> P (line-height: 1.3)

A ještě jeden příklad. Ten obsahuje/slučuje dva potomky selektorů a dítěte. Takže element P je potomkem elementů LI, LI a zároveň musí být dítě prvek OL, prvek OL musí být potomkem DIV. Všimněte si, že volitelné bílá plocha okolo kombinátoru ">" musí být vynecháno. Tedy pozor, zde žádná mezera, tagy/elementy tesně za sebou!