CSS Pseudo-triedy
CSS pseudo-triedy sa pou?ívajú na pridanie ?peciálnych efektov
na niektoré selektory.
Príklady
Hyperlink
Tento príklad predvádza, ako prida? odli?né farby na hyperlink v dokumente.
Hyperlink 2
Tento príklad predvádza, ako prida? iné ?týly na hyperlinky.
Hyperlink: pou?itie :focus
(nefunguje v IE)
Tento príklad predvádza, ako pou?i? :focus pseudo-triedu na hyperlink.
:first-child
- zmeni? first child <p>
Tento príklad predvádza hocijaký <p> element, ktorý je prvým "die?a?om"
hocijakého tl?ného elementu.
(pre IE <!DOCTYPE>
musí by? dekarované)
:first-child
- zmeni? first child <em> vo v?etkých <p> elementoch
Tento príklad predvádza prvý <em> element vo v?etkých <p> elementoch na tlstý.
(pre IE <!DOCTYPE> musí by?
deklarované)
:first-child
- zmeni? v?etky <em> elementy vo first child <p>
Tento príklad predvádza v?etky <em> elementy vo first child
<p> elementoch na tl?né.
(for IE <!DOCTYPE> musí by? deklarované)
:lang (nefunguje pre IE)
Tento príklad predvádza pou?itie :lang pseudo-triedy.
Syntax
The syntax pre pseudo-classes:
selector:pseudo-class {property: value}
|
CSS triedy sa mô?u pou?íva? aj s pseudo-triedami:
selector.class:pseudo-class {property: value}
|
Anchor Pseudo-triedy
Link, ktorý je aktívny, nav?tívený, nenav?tívený alebo ke? ceze? prejdete kruzorom my?i -
toto v?etko mô?e by? zobrazené viacero spôsobmi v prehliada?och, ktoré podporujú CSS:
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
|
Pozn: a:hover MUSÍ príjs? za a:link a a:visited v CSS definícií poradia, aby to malo efekt!!
Pozn: a:active MUSÍ príjs? za a:hover v CSS definícií poradia, aby to malo efekt!!
Pozn: Názvy pseudo-tried nie sú case-sensitive (je jedno, ?i ich pí?ete s ve?kými/malými písmenami).
Pseudo-triedy a CSS Triedy
Pseudo-triedy sa mô?u kombinova? s CSS triedami:
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
|
Ak bol tento link hore nav?tívený, bude ?ervený.
CSS2 - :first-child Pseudo-trieda
:first-child pseudo-trieda je ur?itý element, ktorý sa nachádza prvý v poradí iného elementu (je to prvý element, ktorý ide hne? po materinskom elemente).
Pozn: Aby :first-child fungovalo v IE,
<!DOCTYPE> musí by? deklarované.
Odpovedá prvému <p> elementu
V následujúcom príklade selektor odpovedá ka?dému <p> elementu, ktorý je "prvým die?a?om" (first-child)
ka?dého elementu:
<html>
<head>
<style type="text/css">
p:first-child
{
font-weight:bold
}
</style>
</head>
<body>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
</body>
</html>
|
Try it yourself!
Match the first <em> element in all <p> elements
V následujúcom príklade selektor odpovedá ka?dému <em> elementu, ktorý je first-child pre
<p> element:
<html>
<head>
<style type="text/css">
p > em:first-child
{
font-weight:bold
}
</style>
</head>
<body>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
</body>
</html>
|
Try it yourself!
Odpovedá v?etkým <em> elementom, ktoré sú first-child pre <p> elementy
V následujúcom príklade selektor odpovedá ka?dému <em> elementu v
<p> elementoch, ktoré sú first-child iného elementu:
<html>
<head>
<style type="text/css">
p:first-child em
{
font-weight:bold
}
</style>
</head>
<body>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
</body>
</html>
|
Try it yourself!
CSS2 - :lang Pseudo-trieda
:lang pseudo-trieda vám dovoluje definova? ?peciálne pravidlá pre rozli?né
jazyky. V príklade dolu :lang trieda definuje typ úvodzoviek
pre q element s lang atribútom s hodnotou "no":
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Nejaký text <q lang="no">Úvodzovka v odstavci</q>
Nejaký text.</p>
</body>
</html>
|
Pseudo-triedy
Podpora prehliada?a: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: ?íslo vo "W3C" st?pci indikuje, pre ktoré CSS odporú?anie je vlastnos?
definovaná (CSS1 alebo CSS2).
| Pseudo-class |
Purpose |
IE |
F |
N |
W3C |
| :active |
Pridá ?peciálny etýl na aktivovaný element |
4 |
1 |
8 |
1 |
| :focus |
Pridá ?peciálny ?týl na element, pokial má element focus |
- |
1.5 |
8 |
2 |
| :hover |
Pridá ?peciálny ?týl na element, ak ceze? hýbnete my?ou |
4 |
1 |
7 |
1 |
| :link |
Pridá ?peciálny ?týl na nenav?tívený link |
3 |
1 |
4 |
1 |
| :visited |
Pridá ?peciálny ?týl na nav?tívený link |
3 |
1 |
4 |
1 |
| :first-child |
Pridá ?peciálny ?týl na leement, ktorý je first-child iného elementu |
7 |
1 |
7 |
2 |
| :lang |
Povoluje autorovi uda? jazyk, ktorý sa má pou?i? v ur?itom elemente |
- |
1 |
8 |
2 |
|