CSSseudolajit

Mitä pseudoklassi on?

Pseudoklassit käytetään elementtien erityistilojen määrittämiseen.

Esimerkiksi, sitä voidaan käyttää:

  • Aseta elementin hiiren osoitin päällä ollessa oleva tyyli
  • Aseta vieraillut ja ei-vieraillut linkit eri väreihin
  • Aseta elementin saavuttamisen yhteydessä oleva tyyli
Käytä hiiren osoitinta päällä minulla

Syntaksi

Pseudoklassin syntaksi:

selector:pseudoklassi {
  ominaisuus: arvo;
}

Ankkuripseudoklassi

Linkit voivat näyttää eri tavoin:

Esimerkki

/* Ei vieraillut linkit */
a:link {
  color: #FF0000;
}
/* Vieraillut linkit */
a:visited {
  color: #00FF00;
}
/* Hiiren osoitin päällä linkillä */
a:hover {
  color: #FF00FF;
}
/* Valittu linkki */
a:active {
  color: #0000FF;
}

Kokeile itse

Huomioitavaa:a:hover On oltava CSS-määrittelyssä a:link ja a:visited sen jälkeen voidaan toiminnassa!a:active On oltava CSS-määrittelyssä a:hover Toiminnassa vasta sen jälkeen！Pseudoklassien nimet eivät ole kirjaintasoista riippumattomia.

Pseudoklassit ja CSS-luokat

Pseudoklassit voidaan käyttää yhdessä CSS-luokkien kanssa:

Kun hiiren osoitin on esimerkin linkillä, sen väri muuttuu:

Esimerkki

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

Kokeile itse

Hiiren osoitin päällä <div> -elementissä

Käytetään <div> -elementissä :hover Pseudoklassin esimerkki:

Esimerkki

div:hover {
  background-color: blue;
}

Kokeile itse

Yksinkertainen työkaluvihje hover

Hoveroi <div> -elementin päälle näyttääksesi <p> -elementin (työkaluvihjeen kaltaisena vaikutteena):

Hoveroi ylös näyttääksesi <p> -elementin.

Hei, olen täällä!

Esimerkki

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

Kokeile itse

CSS - :first-child-seudoklasi

:first-child Seudoklasi sopii määritettyyn elementtiin: se on toisen elementin ensimmäinen lapsi.

Sovitaan ensimmäinen <p> -elementti

Alla olevassa esimerkissä valitsin sopii jokaiselle <p> -elementille, joka on minkä tahansa elementin ensimmäinen lapsi:

Esimerkki

p:first-child {
  color: blue;
}

Kokeile itse

Sovitaan kaikki <p> -elementit, joissa on ensimmäinen <i> -elementti

Alla olevassa esimerkissä valitsin sopii kaikkiin <p> -elementteihin, joissa on ensimmäinen <i> -elementti:

Esimerkki

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

Kokeile itse

Sovitaan kaikki ensimmäiset <p> -elementit, joissa on kaikki <i> -elementit

Alla olevassa esimerkissä valitsin sopii jokaiselle <p> -elementille, joka on toisen elementin ensimmäinen lapsi ja sisältää kaikki <i> -elementit:

Esimerkki

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

Kokeile itse

CSS - :lang-seudoklasi

:lang Seudoklasi mahdollistaa erityisten sääntöjen määrittämisen eri kielille.

Alla olevassa esimerkissä:lang Definioi lainausmerkit <q> -elementille, jolla on lang="en" -ominaisuus:

Esimerkki

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Joitakin tekstejä <q lang="no">Lainaus kappaleessa</q> Joitakin tekstejä.</p>
</body>
</html>

Kokeile itse

Lisää esimerkkejä

Lisää erilaisia stilejä hyperlinkkeihin
Tämä esimerkki näyttää, kuinka lisätä muuta stilia hyperlinkkeihin.
Käytä :focus
Tämä esimerkki näyttää, kuinka käyttää :focus-seudoklasi.

Kaikki CSS-seudoklassit

Valitsin Esimerkki Esimerkin kuvaus
:active a:active Valitse aktiivinen linkki.
:checked input:checked Valitse kaikki valitut <input> -elementit.
:disabled input:disabled Valitse kaikki poissa käytöstä olevat <input> -elementit.
:empty p:empty Valitse jokainen <p> -elementti ilman lapsielementtejä.
:enabled input:enabled Valitse kaikki käytettävissä olevat <input>-elementit.
:first-child p:first-child Valitse jokainen vanhempien elementin ensimmäinen lapsi <p>-elementti.
:first-of-type p:first-of-type Valitse jokainen vanhempien elementin ensimmäinen <p>-elementti.
:focus input:focus Valitse keskittyneet <input>-elementit.
:hover a:hover Valitse linkki, johon hiiri on viimeksi viedyn.
:in-range input:in-range Valitse tietyn arvoalueen sisältävät <input>-elementit.
:invalid input:invalid Valitse kaikki arvoja sisältävät <input>-elementit.
:lang(language) p:lang(it) Valitse kaikki lang-ominaisuudella arvolla "it" alkava <p>-elementti.
:last-child p:last-child Valitse jokainen vanhempien elementin viimeinen lapsi <p>-elementti.
:last-of-type p:last-of-type Valitse jokainen vanhempien elementin viimeinen <p>-elementti.
:link a:link Valitse kaikki vieraantuneet linkit.
:not(selector) :not(p) Valitse jokainen ei-<p>-elementti.
:nth-child(n) p:nth-child(2) Valitse jokainen vanhempien elementin toinen lapsi <p>-elementti.
:nth-last-child(n) p:nth-last-child(2) Valitse jokainen vanhempien elementin toinen lapsi <p>-elementti, lasketaan viimeisimmästä lapsista.
:nth-last-of-type(n) p:nth-last-of-type(2) Valitse jokainen vanhempien elementin toinen <p>-elementti, lasketaan viimeisimmästä lapsista.
:nth-of-type(n) p:nth-of-type(2) Valitse jokainen vanhempien elementin toinen <p>-elementti.
:only-of-type p:only-of-type Valitse jokainen <p>-elementti, joka on vanhempien elementin yksinomainen <p>-elementti.
:only-child p:only-child Valitse vanhempien elementin yksinomaan lapsi <p>-elementti.
:optional input:optional Valitaan <input>-elementit, joissa ei ole "required"-ominaisuutta.
:out-of-range input:out-of-range Valitaan <input>-elementit, joiden arvo on määritetty ulkopuolella annetusta intervalista.
:read-only input:read-only Valitaan <input>-elementit, jotka ovat määritetty "readonly"-ominaisuudella.
:read-write input:read-write Valitaan <input>-elementit, joissa ei ole "readonly"-ominaisuutta.
:required input:required Valitaan <input>-elementit, jotka ovat määritetty "required"-ominaisuudella.
:root root Valitaan elementin juurelementti.
:target #news:target Valitaan nykyinen #news-elementti (napsauta URL:ää, joka sisältää kyseisen ankkurin nimen).
:valid input:valid Valitaan kaikki kelvolliset <input>-elementit.
:visited a:visited Valitaan kaikki käytetyt linkit.

Kaikki CSS-pseudoelementit

Valitsin Esimerkki Esimerkin kuvaus
::after p::after Lisätään sisältöä jälkeen jokaisessa <p>-elementissä.
::before p::before Lisätään sisältöä ennen jokaisessa <p>-elementissä.
::first-letter p::first-letter Valitaan jokaisen <p>-elementin ensimmäinen kirjain.
::first-line p::first-line Valitaan jokaisen <p>-elementin ensimmäinen rivi.
::selection p::selection Valitaan käyttäjän valitsema elementin osa.