CSS Pseudo-class
CSS pseudo-class'i kasutatakse spetsiaal-efektide loomiseks mõnede selektorite juures. (selector-märgis mida soovitakse kujundada).
Näited
Hüperlink
Selles näites demonstreeritakse, kuidas lisada hüperlingile erinevaid värve.
Hüperlink - 2.
Selles näites demonstreeritakse, kuidas muuta hüperlingi stiili.
Hüperlink: focus.
Selles näites demonstreeritakse, kuidas kasutada :focus pseudo-class elementi hüperlingis.
(Ei tööta IE's).
:first-child.
Selles näites demonstreeritakse, kuidas "first-child" muudab <p> elemendi paksuks.
(IE's peab <DOCTYPE> olema määratud)
:first-child-2.
Selles näites demonstreeritakse, kuidas "first-child" muudab kõik <p> elemendid paksuks.
(IE's peab <DOCTYPE> olema määratud)
:first-child-3.
Selles näites demonstreeritakse, kuidas "first-child" muudab <p> elemendi "first-child'i" paksuks.
(IE's peab <DOCTYPE> olema määratud).
:lang.
Selles näites demonstreeritakse, kuidas kasutada ":lang pseudo-class'i".
(Ei tööta IE's).
CSS Pseudo-class süntaks
Niisugune on pseudo-class kirjaviis:
selector:pseudo-class {omadus: väärtus}
Css class omadust saab kasutada ka pseudo-class'is:
selector.class:pseudo-class {omadus: väärtus}
CSS Pseudo-class ankur
Hüperlingi "active", "visited", "unvisited" v. "mouse over" omaduste kujundusi saab näha kõigis brauserites, mis toetavad css'i.
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 */
Pane tähele: a: hover peab olema pärast a: visited selleks, et css töötaks korralikult!
Pane tähele: a: active peab olema pärast a: hover selleks, et css töötaks korralikult!
CSS Pseudo-class ja CSS class
Pseudo-class'i ja css class'i saab omavahel kombineerida:
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
Ülal toodud näites olevat linki külastades, muutub selle värv punaseks.
CSS2 - :first-child Pseudo-class
:first-child pseudo-class sobib elemendiga mis on teise elemendi first-child.
Pane tähele: Selleks, et :first-shild töötaks IE's, peab <DOCTYPE> olema määratud).
Sobitamine esimese <p> elemendiga
Selles näites selektor sobib iga <p> elemendiga, mis on mingi elemendi first-child.
<html>
<head>
<style type="text/css">
p:first-child
{
font-weight:bold
}
</style>
</head>
<body>
<p>Mina olen <em>paks</em> poiss. Mina olen <em>paks</em> poiss.</p>
<p>Mina olen <em>paks</em> poiss. Mina olen <em>paks</em> poiss.</p>
</body>
</html>
Proovi ise!
<em> elemendi sobitamine kõigi <p> elementidega
Selles näites selektor sobib iga <em> elemendiga, mis on <p> elemendi first-child.
<html>
<head>
<style type="text/css">
p em:first-child
{
font-weight:bold
}
</style>
</head>
<body>
<p>Mina olen <em>paks</em> poiss. Mina olen <em>paks</em> poiss.</p>
<p>Mina olen <em>paks</em> poiss. Mina olen <em>paks</em> poiss.</p>
</body>
</html>
Proovi ise!
<em> elemendi sobitamine kõigi first-child <p> elementidele
Selles näites selektor sobib iga <em> elemendiga, <p> elemendis, mis on mingi teise elemendi first-child.
<html>
<head>
<style type="text/css">
p :first-child em
{
font-weight:bold
}
</style>
</head>
<body>
<p>Mina olen <em>paks</em> poiss. Mina olen <em>paks</em> poiss.</p>
<p>Mina olen <em>paks</em> poiss. Mina olen <em>paks</em> poiss.</p>
</body>
</html>
CSS2 - :lang Pseudo-class
:lang pseudo-class võimaldab määrata spetsiaalsed reeglid erinevates keeltes. Allpool olevas näites, :lang class määrab jutumärgi tüübi q elemendis, kus atribuudi väärtuseks on "no".
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Mingi tekst <q lang="no">Jutumärgid paragrahvis</q>
Mingi tekst.</p>
</body>
</html>
| Pseudo-class | Otstarve |
|---|---|
| :active | Määrab aktiveeritud elemendi stiili |
| :focus | Määrab elemendi stiili sel hetkel kui element on tähelepanu keskmes (fookuses) |
| :hover | Määrab elemendi stiili sel hetkel kui hiir liigub üle elemendi (mouse over) | :link | Määratleb külastamata lingi stiili |
| :visited | Määratleb külastatud lingi stiili |
| :first-child | Määratleb spetsiaalse stiili elemendile mis on mingi teise elemendi first-child |
| :lang | Lubab autoril valida keele, teatud elementide määramiseks |
