CSS pseudo-luokat

Sisällysluettelo

    Näytä sisällysluettelo

Mitä ovat pseudo-luokat?

Pseudoluokkaa käytetään määrittämään erityistila elementistä.

Sitä voidaan käyttää esimerkiksi:

  • Tyyli elementti, kun käyttäjä vie hiiren sen päälle

  • Vierailtujen ja vierailemattomien linkkien tyyli on erilainen

  • Muotoile elementti, kun se keskittyy

Mouse Over Me

Syntaksi

Pseudo-luokkien syntaksi:

selector:pseudo-class {
  property: value;
}

Ankkuri Pseudo-luokat

Linkit voidaan näyttää eri tavoin:

Esimerkki

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Huomaa: a:hover TÄYTYY tulla a:link ja a:visited CSS-määritelmässä, jotta se olisi tehokas! a:active TÄYTYY tulla perässä a:hover CSS-määritelmässä, jotta se olisi tehokas! Pseudoluokan nimissä kirjainkoolla ei ole merkitystä.

Pseudo-luokat ja HTML-luokat

Pseudo-luokkia voidaan yhdistää HTML-luokkiin:

Kun viet hiiren osoittimen linkin päälle esimerkissä, sen väri muuttuu:

Esimerkki

a.highlight:hover {
  color: #ff0000;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

Vie hiiri päälle <div>

Esimerkki :hover-pseudoluokan käytöstä <div>-elementissä:

Esimerkki

div:hover {
  background-color: blue;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

Yksinkertainen työkaluvihje Hover

Vie hiiri <div>-elementin päälle näyttääksesi <p>-elementin (kuten työkaluvihjeen):

Tada! Tässä minä olen!

Esimerkki

p {
  display: none;
  
background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

CSS - :first-child Pseudo-luokka

Pseudoluokka :first-child vastaa määritettyä elementtiä, joka on toisen elementin ensimmäinen lapsi.

Yhdistä ensimmäinen <p>-elementti

Seuraavassa esimerkissä valitsin vastaa mitä tahansa <p>-elementtiä, joka on minkä tahansa elementin ensimmäinen lapsi:

Esimerkki

p:first-child
{
   
color: blue;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>

Yhdistä ensimmäinen <i>-elementti kaikissa <p>-elementeissä

Seuraavassa esimerkissä valitsin vastaa kaikkien <p>-elementtien ensimmäistä <i>-elementtiä:

Esimerkki

p i:first-child
{
   
color: blue;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

Yhdistä kaikki <i>-elementit kaikissa ensimmäisen alatason <p>-elementeissä

Seuraavassa esimerkissä valitsin vastaa kaikkiin <p>-elementtien <i>-elementteihin, jotka ovat toisen elementin ensimmäinen lapsi:

Esimerkki

p:first-child i
{
  color: blue;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

CSS - Pseudo-luokka :lang

Pseudoluokan :lang avulla voit määrittää erityissääntöjä eri kielille.

Alla olevassa esimerkissä :lang määrittää lainausmerkit -elementeille, joissa on lang="no":

Esimerkki

<html>
<head>
<style>
  q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

Lisää esimerkkejä

Lisää eri tyylejä hyperlinkkeihin

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

Käytä :focus

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Kaikki CSS-pseudo-luokat

:active

Esimerkki:

a:active

Esimerkkikuvaus:

Valitsee aktiivisen linkin

:checked

Esimerkki:

input:checked

Esimerkkikuvaus:

Valitsee jokaisen valitun <input>-elementin

:disabled

Esimerkki:

input:disabled

Esimerkkikuvaus:

Valitsee kaikki käytöstä poistetut <input>-elementit

:empty

Esimerkki:

p:empty

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, jolla ei ole lapsia

:enabled

Esimerkki:

input:enabled

Esimerkkikuvaus:

Valitsee kaikki käytössä olevat <input>-elementit

:first-child

Esimerkki:

p:first-child

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on ylätasonsa ensimmäinen lapsi

:first-of-type

Esimerkki:

p:first-of-type

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on sen ylätason ensimmäinen <p>-elementti

:focus

Esimerkki:

input:focus

Esimerkkikuvaus:

Valitsee <input>-elementin, jossa on kohdistus

:hover

Esimerkki:

a:hover

Esimerkkikuvaus:

Valitsee linkit hiirellä

:in-range

Esimerkki:

input:in-range

Esimerkkikuvaus:

Valitsee <input>-elementit, joiden arvo on tietyllä alueella

:invalid

Esimerkki:

input:invalid

Esimerkkikuvaus:

Valitsee kaikki <input>-elementit, joilla on virheellinen arvo

:lang(language)

Esimerkki:

p:lang(it)

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, jonka lang-attribuutin arvo alkaa sanalla "it"

:last-child

Esimerkki:

p:last-child

Esimerkkikuvaus:

Valitsee kaikki <p>-elementit, jotka ovat vanhemman viimeinen ali

:last-of-type

Esimerkki:

p:last-of-type

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on sen pääelementin viimeinen <p>-elementti

:link

Esimerkki:

a:link

Esimerkkikuvaus:

Valitsee kaikki vierailemattomat linkit

:not(selector)

Esimerkki:

:not(p)

Esimerkkikuvaus:

Valitsee kaikki elementit, jotka eivät ole <p>-elementtejä

:nth-child(n)

Esimerkki:

p:nth-child(2)

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on ylätasonsa toinen lapsi

:nth-last-child(n)

Esimerkki:

p:nth-last-child(2)

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on ylätasonsa toinen lapsi, viimeisestä lapsista laskettuna

:nth-last-of-type(n)

Esimerkki:

p:nth-last-of-type(2)

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on sen ylätason toinen <p>-elementti, viimeisestä alielementistä laskettuna

:nth-of-type(n)

Esimerkki:

p:nth-of-type(2)

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on sen ylätason toinen <p>-elementti

:only-of-type

Esimerkki:

p:only-of-type

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on pääelementin ainoa <p>-elementti

:only-child

Esimerkki:

p:only-child

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin, joka on ylätasonsa ainoa ali

:optional

Esimerkki:

input:optional

Esimerkkikuvaus:

Valitsee <input>-elementit, joissa ei ole "pakollista" attribuuttia

:out-of-range

Esimerkki:

input:out-of-range

Esimerkkikuvaus:

Valitsee <input>-elementit, joiden arvo on määritetyn alueen ulkopuolella

:read-only

Esimerkki:

input:read-only

Esimerkkikuvaus:

Valitsee <input>-elementit, joille on määritetty "vain luku"-attribuutti

:read-write

Esimerkki:

input:read-write

Esimerkkikuvaus:

Valitsee <input>-elementit, joissa ei ole "vain luku"-attribuuttia

:required

Esimerkki:

input:required

Esimerkkikuvaus:

Valitsee <input>-elementit, joissa on määritetty "pakollinen" attribuutti

:root

Esimerkki:

root

Esimerkkikuvaus:

Valitsee asiakirjan juurielementin

:target

Esimerkki:

#news:target

Esimerkkikuvaus:

Valitsee nykyisen aktiivisen #news-elementin (napsautetaan URL-osoitetta, joka sisältää kyseisen ankkurin nimen)

:valid

Esimerkki:

input:valid

Esimerkkikuvaus:

Valitsee kaikki <input>-elementit, joilla on kelvollinen arvo

:visited

Esimerkki:

a:visited

Esimerkkikuvaus:

Valitsee kaikki avatut linkit

Kaikki CSS-pseudoelementit

::after

Esimerkki:

p::after

Esimerkkikuvaus:

Lisää sisältö jokaisen <p>-elementin jälkeen

::before

Esimerkki:

p::before

Esimerkkikuvaus:

Lisää sisältö ennen jokaista <p>-elementtiä

::first-letter

Esimerkki:

p::first-letter

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin ensimmäisen kirjaimen

::first-line

Esimerkki:

p::first-line

Esimerkkikuvaus:

Valitsee jokaisen <p>-elementin ensimmäisen rivin

::marker

Esimerkki:

::marker

Esimerkkikuvaus:

Valitsee luettelon kohteiden merkit

::selection

Esimerkki:

p::selection

Esimerkkikuvaus:

Valitsee elementin osan, jonka käyttäjä on valinnut