Selektor je identifikátor pravidel. Složité? Nevadí, ukážu vám příklad, co je to selektor
h2 { vlastnosti } .odstavce { vlastnosti } #hlavni { vlastnosti } Jak jste asi už pochopily v předchozích dílech, tak první je definice vlastností samotného elementu "h2", druhá je definice vlastností třídy s názvem "odstavce" a konečně třetí je definice vlastností identifikátoru s názvem "hlavni".

Seskupování selektorů elementů

Selektory se dají seskupovat, abychom ušetřili místo a zjednodušili si definici selektorů.
Uvedu to na tomto příkladě: mám nadpisy h1, h2, h3, h4, h5 a chci, aby všechny byly psány fontem Verdana. Normálně bych to zapsal takto
h1 { font-family: Verdana } h2 { font-family: Verdana } h3 { font-family: Verdana } h4 { font-family: Verdana } h5 { font-family: Verdana } ale já mohu použít seskupení selektorů a ušetřit si místo a zjednodušit zápis takto
h1, h2, h3, h4, h5 { font-family: Verdana }

a tato definice nám provede to samé, jako definice předtím, s tím, že si ušetříme místo a zjednodušíme zápis. A pokud náhodou budeme chtít změnit například barvu písma u elementu "h5" na červenou, tak to pouze doplníme o toto
h1, h2, h3, h4, h5 { font-family: Verdana } h5 { color: red }

Seskupování selektorů tříd (identifikátorů) se selektory elementů

Stejně tak jako u jednotlivých elementů máme možnost seskupování elementů s kombinací tříd a identifikátorů. Opět bude jednodušší vysvětlit na příkladě.

Mějme div a k němu přiřazen identifikátor "text" s vlastnostmi: šířka 200px; levý a pravý border (ohraničení), vnitřní odsazení 10px (levé i pravé), font Verdana velikosti 12px červený. Odkaz uvnitř tohoto divu bude bez podtržení (ale jenom pouze v tomto divu) a jinde na stránce klasicky s podtržením. Jinak odkazy budou psány tučně a modře.

Takto bude vypadat kód na stránce
<div id="text"> Zde bude nějaký text a tady bude odkaz třeba na <a href="http://www.google.com">GOOGLE</a> a tady skončí div </div> a tady budou další odkazy třeba na <a href="http://www.w3c.org">W3C</a> A v CSS bude nadefinováno toto
#text { width: 200px; border-left: 1px solid black; border-right: 1px solid black; padding-left: 10px; padding-right: 10px; font-family: Verdana; font-size: 12px;} #text a { text-decoration: none;} a { font-weight: bold; color: blue;} Na stránce to bude poté vypadat takto PŘÍKLAD1-CSS

Tak a teď vám vysvětlím co se stalo, když jsme to zapsali takto. Nadefinovali jsme div s danými vlastnostmi, na tom by nebylo nic neobvyklého, ale poté jsme napsali toto "#text a" a to znamená, že všechny odkazy v divu s identifikátorem "#text" budou bez podtržení (vlastnost text-decoration: none). A nakonec jsme nadefinovali všem odkazům na stránce vlastnost "tučné" (font-weight: bold) a "modré" (color: blue), takže i ten odkaz v divu. Ostatní písmo mimo div už také nebude mít vlastnosti, jako to písmo v divu s identifikátorem "#text".

Další možné kombinování (seskupování) selektorů

Už jsme si vysvětlily tyto dvě možnosti, ale raději je znovu zkráceně připomenu:

zápis h1, h2 { } nám naformátuje elementy "h1" a "h2" podle vlastností uvedených mezi složenými závorkami

zápis #text a { } nám naformátuje element "a" umístěný v elementu (většinou div nebo span) s identifikátorem "#text" opět podle vlastností uvedených mezi složenými závorkami s využitím vlastností pro element s identifikátorem #text (možná je to složité na pochopení, ale tomuto se říká dědičnost a já ji vysvětlím ve 4 díle seriálu o CSS).

zápis h1.trida { } nám naformátuje element h1 který bude definován s atributem třídy "trida". Toto nám zajišťuje unikátnost elementu h1 (samozřejmě i ostatních elementů takto definovaných).

A teď další možnosti zápisu
zápis * { } nám naformátuje vše (tzn. všechny elementy, pozn. div a span jsou také elementy) podle vlastností uvedených mezi složenými závorkami

zápis A>B { } je trošku složitější. Symbol "větší" znamená "potomek" a vztahuje se na každý prvek B který je přímým potomkem prvku A, neboli prvek A je rodičem prvku B

zápis A+B { } symbol "+" znamená sourozenec, neboli každý B předcházející sourozeneckým prvkem A. Dobře je tato vlastnost vysvětlitelná na nadpisech. Například zápis h1 + h2 {}znamená, že pokud budu mít nad nadpisem h2 nadpis h1 použije se vlastnost zadaná ve složených závorkách (většinou nějaké odsazení).

Pseudotřídy a pseudoelementy selektorů

Selektory mohou mít různé pseudotřídy, které daný element má v dané situaci

pseudotřída :first-child { }
tato pseudotřída definuje vlastnosti tomu prvku, který je prvním potomkem prvku nadřazeného
p:first-child em { font-weight : bold; color: red;} Tento příklad přiřadí prvnímu potomku "em" v elementu "p" vlastnost tučné červené písmo.

pseudotřída :link { }
tato pseudotřída definuje vlastnost elementu odkazu, který ještě nebyl navštíven

pseudotřída :visited { }
tato pseudotřída definuje vlastnost elementu odkazu, který již byl navštíven

pseudotřída :hover { }
tato asi nejvíce používaná pseudotřída dá vlastnost elementu odkazu přes který přejedeme kurzorem

pseudotřída :active { }
tato pseudotřída definuje vlastnost elementu odkazu, který je aktivní, lépe řečeno, který byl právě vybrán

pseudotřída :lang(cs) { }
tato pseudotřída definuje vlastnost takovému elementu, který má přirozený jazyk např. "cs"

pseudoelement :first-line { }
tento pseudoelement definuje vlastnost prvnímu řádku elementu např. "a"

pseudoelement :first-letter { }
umožňuje vytvoření iniciály, lépe řečeno zvýraznění prvního písmena elementu. U 3 dílu seriálu jsem na příkladě ukázal možnost vytvoření této iniciály pomocí "span"u aplikovaného pouze na první písmeno. Toto je další možnost jak to vytvořit.
Teď by jsme to vytvořily touto definicí v CSS
h2 { margin-top: 3px; margin-bottom: 3px; font-family: Verdana; font-size: 16px; color: red;} h2:first-letter { font-size: 20px; font-weight: bold;} A poté u každého nadpisu h2 bude první písmeno tučné 20px velké.

Atributy

Každý element kódu má svoji definici atributů. Najdete je na W3C u jednotlivých specifikací HTML (XHTML). Tyto atributy lze poté dále využít pomocí CSS

A[atribut] { }
každý prvek který má "atribut" bude formátován pomocí vlastností definovaných ve složených závorkách.

A[atribut="hodnota"] { }
každý prvek který má "atribut" s hodnotou "hodnota" bude formátován pomocí vlastností definovaných ve složených závorkách

Tak to je jako doplněk asi vše, některé věci z toho jsou pro začátečníky dosti složité, ale až třeba pochopí CSS více mohou se sem vrátit a přečíst si o tom znova.

Jak už jsem řekl, příště se budeme zabývat dědičností.

Informace zde čerpané jsou (když nejsou z mé hlavy) přímo z technické specifikace (manuálu) CSS 2.1

Autor: in-spyder

Facebook Twitter Topčlánky.cz Linkuj.cz

Sdílet