CSS-opas, CSS - Pseudo ryhmät

Pseudo-valitsimet, pseudo class

Pseudo-valitsimet tarkoittava jollekin HTML-elementille tapahtuman perusteella vaihtuvia CSS-ohjeita. Esimerkiksi linkkitekstillä on tekstiväri punainen, kun hiiren osoitin osuu linkkitekstiin tekstiväri on sininen ja jos linkkitekstiä klikataan tekstiväri on vihreä.

valitsin:pseudo-class{
      ominaisuus: asetus;
     }

Esimerkiksi linkeissä käytettävät pseudo-valitsimet: 

   a:link - linkki sivun avautuessa
   a:visited - linkkiä klikattu, käytetty
   a:hover - linkki kun hiiren osoitin on kohdalla
   a: active - linkkiä klikataan

Alla esimerkki linkkiteksti ja sen koodaukset:

ESIMERKKI "LINKKI" 


  Linkki ja pseudoohjeet, CSS:

  a.linkkiteksti{
    color: green; 
  }  
  a.kohdalla:hover {
    color: #ff0000;
    font-size:110%;
  }
 
  TEKSTIN VÄRI - HTML:

  <p><a class="linkkiteksti kohdalla" href="#"> 
    ESIMERKKI "LINKKI" 
  </a></p>

Alla ongelmallinen CSS-ohje. Ongelmalliseksi ohjeen tekee sen yleisyys, ohjeella muotoillaan kaikki div-elementit:


  Ongelmallinen CSS-ohje:

  div {
    background-color: green;
    color: white;
    padding: 25px;
    text-align: center;
  }

  div:hover {
    background-color: blue;
  }
 
  HTML:

  <div> Siirrä hiiri tämän päälle </div>

Alla, ongelma on poistettu antamalla CSS-ohjeille nimi:

Siirrä hiiri tänne ja klikkaa !

Esimerkin koodaus:


  Toimiva esimerkki CSS:

  .laatikkoA {
     background-color: green;
     color: white;
     padding: 25px;
     text-align: center;
	 width:90%;
  }
  .laatikkoA:hover {
     background-color: blue;
  }
  .laatikkoA:active{
     background-color: yellow;
     color: green;
  }
 
  HTML:

  <div class="laatikkoA"> Siirrä hiiri tänne ja klikkaa ! </div>

Esimerkki, tekstistä avautuva opaste-ruutu:

Tässä teksti jossa on avautuva opaste, siirrä hiiren osoitin kohdalle.

Tähän voi kirjoittaa opastetekstin ja ehkä laitaa kuvankin.

Esimerkin koodaus:


  CSS:

  .opaste {
    display: none;
    background-color: yellow;
    padding: 20px;
  }
  .ohjeet:hover p {
    display: block;
  }
  .sininen{
	color:blue;   
  }
 
  HTML:

  <div class="sininen ohjeet">
    Tässä teksti jossa on avautuva opaste, siirrä hiiren osoitin kohdalle.
    <p class="opaste"> 
	  Tähän voi kirjoittaa opastetekstin ja ehkä laitaa kuvankin.
	</p>
  </div>

Ensimmäinen aliluokka, :first-child pseudo class

Määriteellä voidaan asettaa CSS-ohje HTML-elementille joka sijaitsee ensimmäisenä HTML-koodauksessa.

Esimerkissä CSS-muotoilu kohdistuu HTML-koodauksen ensimmäiseen p-elementtiin:



Esimerkin koodaus:


  CSS-ohje:

  p:first-child {
    color: blue;
  } 
 
  HTML-koodaus:

  <p> Ensimmäinen p-elementti www-sivun koodauksessa. </p>
  <p> Toinen p-elementtti. </p>


CSS-ohje muotoilee p-elementtien ensimmäiset i-elementit:



Esimerkin koodaus:


  CSS-ohje:

  p i:first-child {
    color: RED;
  } 
 
  HTML-koodaus:

  <p>Tekstissä <i>punainen</i> kursiivi, mutta <i>seuraava</i> 
    kursivoitu ei ole punainen.</p>
  <p>Tässäkin <i>punainen</i> mutta <i>tämä ei ole</i>.</p>


CSS-ohje muotoilee ensimmäisen p-elementin kaikki i-elementit:



Esimerkin koodaus:


  CSS-ohje:

  p:first-child i  {
    color: RED;
  } 
 
  HTML-koodaus:

  <p>Tekstissä <i>punainen</i> kursivoiti ensimmäissä <i>p-elementissä</i>.</p>
  <p>Tässä <i>p-elementissä</i> ei ole punaisia <i>kursivointeja</i>.</p>


CSS-ohje muotoilee ensimmäisen p-elementin ensimmäisen tekstirivin:



Esimerkin koodaus:


  CSS-ohje:

  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  } 
 
  HTML-koodaus:

  <p> Tämä CSS-ohje muotoilee p-elementissä olevasta tekstistä www-sivulla näkyvän ensimmäisen rivin. 
   Ohjeen ongelma on se että selaimen koon muuttuessa, ensimmäisen rivin tekstin sanojenkin määrä 
   muuttuu. Eli, CSS-ohjeen muotoileman tekstin pituus muuttuu. 
  </p>


Kaikki CSS pseudo-luokat

Kaikkiin esimerkkeihin tästä tai klikkaamalla valitsin-sarakkeesta valitsinta.

Valitsin Esimerkki, tarkoitus Esimerkki
:active Aktiivinen teksti (klikattaessa) input:checked
:checked Lomakkeet, valintakenttä tai valintaruuduut input:checked
:disabled Lomakkeen tekstikenttään kirjoitus estetty input[type=text]:disabled
:empty Tyhjä HTML-elementti, esim ei tekstiä p:empty
:enabled Lomakkeen tekstikenttä, kirjoitus sallittu ja esim. taustaväri input[type=text]:enabled
:first-child Ensimmäisiin p-elementteihin kohdistettu CSS-ohje p:first-child
:first-of-type Ensimmäisen p-elementin valinta p-elementtien joukosta p:first-of-type
:focus Valitun tai hiirellä klikatun lomakekentän CSS-muotoilu input:focus
:hover Hiiren osoitin linkki-elementin kohdalla a:hover
:in-range Lomakekentän reunaviivojen CSS-ohje input:in-range
:invalid Täytetyn lomakekentän reunaviivon CSS-ohje input:invalid
:lang(language) p-elementti kieli italia p:lang(it)
:last-child p-elementtien joukosta viimeisen p-elementin CSS-ohje p:last-child
:last-of-type Viimeisen tyypiltään p-elementin CSS-ohje p:last-of-type
:link Tekstilinkin CSS-ohjeet - Katso Linkit kohdasta a:link
:not(selector) CSS-ohje kaikille teksti-elementeille jotka eivät ole p-elementeille :not(p)
:nth-child(n) CSS-ohje tietylle elementille jonka sijainti HTML-koodauksessa määritellään järjestysnumerolla p:nth-child(2)
:nth-last-child(n) CSS-ohjeita koodauksen HTML-koodauksen lopusta alkaen muotoiluun p:nth-last-child(2)
:nth-last-of-type(n) CSS-ohje HTML-koodauksen lopusta numerolla ilmaistulle ja ohjeen tyyppiselle elementille p:nth-last-of-type(2)
:nth-of-type(n) CSS-ohje HTML-koodauksen alusta numerolla ilmaistulle ja ohjeen tyyppiselle elementille p:nth-of-type(3)
:only-of-type CSS-ohje muotoilee ensimmäisen annetun tyyppisen elementin jonkin muun elementin sisältä p:only-of-type
:only-child CSS-ohje p-elementille joka on esimerkiksi div-elementissä ainoana p-elementtinä.
Jos div-elementissä on kaksi p-elementtiä, ohje ei koske kumpaakaan.		 p:only-child
:optional CSS-ohje vaihtoehtoiselle lomakekentälle input:optional
:out-of-range CSS-ohje input-elementille jos annettu tieto ei ole raja-arvojen välissä input:out-of-range
:read-only CSS-ohje input-elementille jossa on esiastettu teksti joka on ainoastaan luettavissa, kentään ei voi kirjoittaa input:read-only
:read-write CSS-ohje input-elementille jossa esiasetttu teksti ja johon voi kirjoittaa input:read-write
:required CSS-ohje ilmaisemaan tärkeää lomake-kentää, esim jonkin olennainen annettava tieto input:required
:root CSS-ohje asettaa "pää-elementille muotoilun, esim body-elementille taustaväri root
:target CSS-ohje jolla voidaan sivun sisäisen linkin kohteelle tehdä CSS-muotoilu :target
:valid CSS-ohje jolla voidaan input-elementissä annatun email-osoitteen olevan "oikein kirjoitettu" input:valid
:visited CSS-ohje jota www-sivu käyttää jos linkkiä on klikattu ja linkin kohteessa käyty (katso Linkit) a:visited

Kaikki CSS pseudo-elementit

Valitsin Esimerkki, tarkoitus Esimerkki
::after CSS-ohje jolla lisätään HTML-elementillä näytettävän tekstin perään esimerkiksi näytettävä teksti p::after
::before CSS-ohje HTML-elementti tekstin eteen lisättävälle esimerkiksi tekstille p::before
::first-letter CSS-ohje muotoilee p-elementtien ensimmäisen kirjaimen p::first-letter
::first-line CSS-ohje muotoilee p-elementtien ensimmäiset rivit ::first-line
::selection CSS-ohje muotoilee esimerkiksi hiirellä valitun tekstin ::selection

Design and edit © player