HTMLHunden | En pragmatisk höghastighetsguide till webbutveckling, använd vid Uppsala Universitet

Vanliga selektorer och atttribut

Man kan ju tycka att det borde räcka med att kunna hänvisa till element bara via deras typ, klass eller typer. Detta är dock inte sant, suck! Det går att använda att komma åt element på andra sätt och detta gör det lättare man slipper sätta klass eller id på allt. Nedanför finner ni olika selektorer och exempel. Observera att det finns flera....Never ending story!

Selektor: *

Exempel på HTML och CSS med *

<h2>En rubrik, yay!</h2>
<p>En paragraf, yay!</p>

*{
  font-size: 24px; 
  background:#ff6600;
 }

Selektor: E

Exempel på HTML och CSS med E

E står i detta fall att man använder elementets typ som selektor.

<p>En paragraf, yay!</p>

p{
  font-size: 24px; 
  background:#ff6600;
}

PseudoKlasser

E:link

Exempel på ett element som är en länk som inte besökts än.

<a href="http://htmlhunden.se">Värsta grymma grejen!</a>

a:link{
  color:pink;
}

E:visited

Exempel på ett element som har blivit besökt.

<a href="http://htmlhunden.se">Värsta grymma grejen!</p>

a:visited{
  color:blue;
}

E:hover

Exempel på element som har muspekaren över sig.

<a href="http://htmlhunden.se">Värsta grymma grejen!</p>

a:hover{
  color:green;
}

E:active

Exempel på länk som är aktivt (exempelvis när användaren trycker ner knappen)

<a href="http://htmlhunden.se">Värsta grymma grejen!</p>

a:active{
  color:purple;
}

Kombinationer

E F

Exempel på referens till extern stilmall

Alla element F som kommer efter E. Alltså i detta fall alla fyra första paragrafer.

<div class="yttre">
  <p>En första paragraf</p>
  <p>En andra paragraf</p>
  <p>En tredje paragraf</p>
  <div class="inre">
    <p>En fjärde paragraf</p>
  </div>
</div>

.yttre p{
  color:pink;
}

E+F

Exempel på referens till extern stilmall

alla element som direkt föregås av E. Alltså i detta fall kommer andra och tredje paragrafen att påverkas.

<div class="yttre">
  <p>En första paragraf</p>
  <p>En andra paragraf</p>
  <p>En tredje paragraf</p>
  <div class="inre">
    <p>En rubrik, yay!</p>
  </div>
</div>

p + p{
  color:pink;
}

E > F

Exempel på element som är direkt barn av ett annat element.

Anta att vi har följande html...

<div class="yttre">
  <p>En första paragraf</p>
  <p>En andra paragraf</p>
  <div class="inre">
    <p>En inre paragraf!</p>
  </div>
</div>

Och sedan skriver denna regel..

.yttre > p{
  color:pink;
}

Så kommer vi således alltså endast "träffa" de två första <p>-elementen eftersom endast de är direkta barn till elementet med klassen .yttre.

Resultat

En första paragraf

En andra paragraf

En inre paragraf

Det här kapitlet är en del av en den interaktiva och pragmatiska höghastighetsguiden till webbutveckling — HTMLHunden. Använd knapparna nedan för att läsa vidare eller navigera till innehållsförteckningen.

Selektorer