CSS-selectors

Når du skriver en css-regel bruker du en css-selector til å bestemme hvilket/hvilke elementer regelen skal gjelde for.

tag-selector

div {
  color: green;
}

Her gjelder regelen for alle <div> i dokumentet, de får grønn skriftfarrge.
Dette er et eksempel på en tag - selector (slik som div span p article table td li ol ul ...)

id-selector

#main {
  background-color: yellow;
}

Denne selectoren velger et element i dokumentet som har id="main" , f.eks <div id="main">. Alle tagger kan gis en id, men hver id skal være unik - bare brukes en gang.

class-selector

.skyer {
  background-color:whitesmoke;
}

Dette er en class-selector, denne klassen kan settes på mange forskjellige elementer som vist under

<div class="skyer"></div>
  <span class="skyer"></span>
  <p class="skyer"> </p>

Klasser brukes dersom regelen skal gjelde for mer enn ett element (men ikke alle av denne typen),
for elementer av forskjellige typer.

pseudo-selector

div:hover {
  color: blue;
  transition: 1s;
}

En pseudo-selector som gjelder for element når pekeren er over elementet. Kan brukes til å framheve det elementet
pekeren er over - ofte en link ( <a> ). Transition gjør at endringen fra normalt utseende skjer gradvis (1s).

En liste over vanlige pseudo-class selectors

:active a:active - en link som brukeren klikker på
:checked radio eller checkbox, style for de som er valgt
:focus typisk input element, input:focus - brukeren har markør inne i elementet
:hover muspeker er over elementet, div:hover
:nth-of-type() tr:nt-of-type(odd) - alle odde rader i en tabell, kan også bruke (even)
:valid typisk en input:valid - dersom det brukeren skriver er ok kan du vise dette med css
:visited a:visited regel som gjelder for besøkte linker

sammensatte selectors

div.skyer {
   /*  alle diver som har klassen skyer */
}

<div class="skyer">regelen gjelder meg</div>


#main p {
  /* alle paragrafer inne i elementet med id="main" */
}

<div id="main">
  <p>denne</p>
  <p>og denne</p>
</div>

Etterkommere

div div p span {
  /* en span inne i en paragraf inne i en div i en div */
}

<div>
  <div>
    <p>
      <span>gjelder meg</span>

Barn

div > span {
  /* alle span som er direkte inne i en div */
}

<div>
  <span>gjelder meg</span>
  <p>
    <span>men ikke meg - fordi jeg er inne i en p </span>

Nære Naboer

h2 + p {
  /* alle p som følger rett etter en h2 */
}

<h2>Overskrift</h2>
<p> gjelder meg</p>
<p> men ikke meg</p>

Fjerne Naboer

h2 ~ p {
  /* alle p som følger etter en h2 */
}

<h2>Overskrift</h2>
<p> gjelder meg</p>
<p> og meg også</p>

css-selectors