CSS Diner

Ingen bekymring, dette klarer du!

Du skal straks lære CSS selektorer! Selektorer er måten du velger hvilke element du vil gi stiler til.

Observér - En CSS regel

p {
   color: red;
}

Her velger "p" selektoren (henter alle <p> elementene) og gir dem color stil-egenskapen (setter fargen på teksten til rød).

selektor {
   egenskap: verdi;
}

I dette spillet er det bare selektorene vi fokuserer på.

For å spille skriver du en CSS selektor i editoren under for å hente ut (velge) de rikige elementene på bordet. Hvis du skriver riktig selektor, går du videre til neste nivå.

   

Hint!

          

Hold musepekeren over elementene på bordet for å se deres HTML markup.

        

Få hjelp med selektorer til høyre! →

Ok, skjønner!
Hjelp, jeg siter fast!
stilark.css
CSS Editor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+
enter
{
/* Stiler ville gått inn her, mellom krøllparentesene. */
}

/*
Skriv inn et tall for å hoppe til et nivå.
Ex → "5" for nivå 5
*/
spisebord.html
HTML Visning
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Hva er dette?

Det er et lite spill som hjelper deg å lære CSS selektorer. Skriv inn riktig selektor for å fullføre hvert nivå. Få hjelp i menyen på høyresiden. Den originale engelske utgaven av spillet finner du på flukeout.github.io

Dette er work in progress, så kom gjerne med tilbakemelding!

Laget av @flukeout med takknemlighet til...

@k88hudson, @antlam7 og @smashman2004.

Oversatt av Eirik Stavelin.

< >