Site hosted by Angelfire.com: Build your free website today!

CSS Pseudo-class

CSS

CSS pseudo-class'i kasutatakse spetsiaal-efektide loomiseks mõnede selektorite juures. (selector-märgis mida soovitakse kujundada).

Näited

 red_dot.gif Hüperlink
Selles nšites demonstreeritakse, kuidas lisada hüperlingile erinevaid värve.

 red_dot.gif Hüperlink - 2.
Selles näites demonstreeritakse, kuidas muuta hüperlingi stiili.

 red_dot.gif Hüperlink: focus.
Selles näites demonstreeritakse, kuidas kasutada :focus pseudo-class elementi hüperlingis.
(Ei tööta IE's).

 red_dot.gif :first-child.
Selles näites demonstreeritakse, kuidas "first-child" muudab <p> elemendi paksuks.
(IE's peab <DOCTYPE> olema määratud)

 red_dot.gif :first-child-2.
Selles näites demonstreeritakse, kuidas "first-child" muudab kõik <p> elemendid paksuks.
(IE's peab <DOCTYPE> olema määratud)

 red_dot.gif :first-child-3.
Selles näites demonstreeritakse, kuidas "first-child" muudab <p> elemendi "first-child'i" paksuks.
(IE's peab <DOCTYPE> olema määratud).

 red_dot.gif :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>

Proovi ise!

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