CSS pseudolinkkiviittausoppaasti

CSS pseudoklasiit

Pseudoklasiit määrittelevät elementin erityisen tilan.

Esimerkiksi, sitä voidaan käyttää:

  • Aseta tyylejä, kun käyttäjä osoittaa hiiren elementtiin.
  • Aseta eri tyylejä käytetyille ja käyttämättömille linkkeille.
  • Aseta tyylejä, kun elementti saa fokuksen.
  • Aseta tyylejä vahvistettaville, virheellisille, pakollisille ja valinnaisille lomakkeen elementeille.

Seuraavassa taulukossa esitetään CSS:n erilaiset pseudoklasiit:

Pseudoklasi Esimerkki Esimerkki kuvaus
:active a:active Valitse aktiivinen linkki.
:any-link a:anylink Valitse kaikki <a> tai <area>-elementit, joilla on href-ominaisuus.
:auto-fill input:autofill Valitse kaikki <input>-elementit, jotka on täytetty selaimen toimesta.
:checked option:checked Täsmää kaikki valitut <input> tai <option> -elementit.
:default input:default Valitse oletusarvoiset lomakkeen elementit, jotka liittyvät ryhmään.
:defined :defined Valitse kaikki määritellyt elementit (standardi- tai mukautetut elementit).
:dir() :dir(rtl) Valitse elementit, joilla on määritelty tekstisuunta.
:disabled option:disabled Valitse kaikki käytöstä poistetut elementit, käytetään usein lomakkeen elementteihin.
:empty div:empty Valitse kaikki elementit, joilla ei ole lapsielementtejä (mukaan lukien tekstipisteet).
:enabled input:enabled Valitse kaikki käytössä olevat elementit, käytetään usein lomakkeen elementteihin.
:first @page :first Merkitse dokumentin ensimmäinen sivu tulostukseen (yhdessä @page-säännön kanssa).
:first-child p:first-child Valitse elementti, joka on sen isän ensimmäinen lapsi-elementti (veljeksiä sisältävässä joukossa).
:first-of-type li:first-of-type Valitse ensimmäinen tyyppinen elementti joukossa veljeksistä.
:focus select:focus Valitse fokusoitu elementti, käytetään usein lomakkeen elementteihin.
:focus-visible button:focus-visible Valitse fokusoitu elementti (sovelletaan vain näppäimistöfokukseen, ei hiiren fokukseen).
:focus-within form:focus-within Täsmää elementti tai sen mikä tahansa jälkeläinen, joka saa fokuksen.
:fullscreen :fullscreen Valitse täysin ruudullinen elementti.
:has() h2:has(+p) Valitse <h2>-elementti, joka seuraa välittömästi <p>-elementtiä, ja sovelta tyylejä <h2>-elementtiin.
:hover a:hover Valitse hiiren osoittimen alla oleva elementti.
:in-range input:in-range Valitse <input>-elementti, jonka arvo on määritetty sallituissa arvoissa.
:indeterminate input:indeterminate Valitse epävarmoissa tiloissa olevat lomakkeen elementit.
:invalid input:invalid Valitse virheelliset lomakkeen elementit.
:is() :is(ul, ol) Valitse kaikki <ul> ja <ol> -elementit.
:lang() p:lang(it) Valitse <p>-elementti, jolla on lang-ominaisuus "it" (italiaa).
:last-child li:last-child Valitse <li>-elementti, joka on sen isän viimeinen lapsi-elementti.
:last-of-type p:last-of-type Valitse <p>-elementti, joka on sen isän viimeinen lapsi-elementti.
:left @page :left Merkitse kaikki vasemmat sivut dokumentin tulostukseen (yhdessä @page-säännön kanssa).
:link a:link Valitse kaikki lukemattomat linkit.
:modal :modal Valitse tilassa olevat elementit.
:not() :not(p) Valitse kaikki elementit, jotka eivät ole <p>-elementtejä.
:nth-child() p:nth-child(2) Valitse <p>-elementti, joka on sen isän toinen lapsi-elementti.
:nth-last-child() p:nth-last-child(2) Valitse sen isän elementti, joka on toinen viimeinen lapsi.
:nth-last-of-type() p:nth-last-of-type(2) Valitse sen isän elementti, joka on toinen viimeinen lapsi.
:nth-of-type() p:nth-of-type(2) Valitse sen isän elementti, joka on toinen <p>-elementti.
:only-child p:only-child Valitse sen isän elementti, joka on ainoa lapsi.
:only-of-type p:only-of-type Valitse sen isän elementti, joka on ainoa <p>-elementti.
:optional textarea:optional Valitse without required-ominaisuutta omaavat <input>, <select> tai <textarea>-elementit.
:out-of-range input:out-of-range Valitse arvoa ylittävä <input>-elementti.
:placeholder-shown input:placeholder-shown Valitse nykyisessä näytössä oleva paikkapohjainen tekstiä sisältävä <input>- tai <textarea>-elementti.
:popover-open :popover-open Valitse näytettävänä oleva pop-up-tilassa oleva elementti.
:read-only input:read-only Valitse readonly-ominaisuuden omaava syöttöelementti.
:read-write input:read-write Valitse muokattava syöttöelementti.
:required input:required Valitse required-ominaisuuden omaava syöttöelementti.
:right @page :right Merkitsee tulostettavan dokumentin kaikki oikeat sivut (@page-säännön kanssa yhdessä).
:root :root Valitse dokumentin juurelementti.
:scope :scope Valitse valitsimen vastaamana oleva elementti.
:state() :state() Valitse määritellyllä mukautetulla tilalla oleva mukautettu elementti.
:target :target Valitse nykyinen aktiivinen kohdeelementti.
:user-invalid :user-invalid Valitse arvoja sisältämättömät lomakeelementit (käyttäjän kanssa vuorovaikutuksen jälkeen).
:user-valid :user-valid Valitse arvoja sisältävät lomakeelementit (käyttäjän kanssa vuorovaikutuksen jälkeen).
:valid input:valid Valitse kaikki arvoja sisältävät syöttöelementit.
:visited a:visited Valitse kaikki käytetyt linkit.
:where() :where(ol, ul) Valitse kaikki <ul> ja <ol> -elementit.