CSS kan være rigtig svært til at starte med. Der er udviklet mange spil omkring det som hjælper en med at komme i gang. Vi har samlet en liste her: CSS Spil

CSS - Selectorer

CSS Selectors er en af de mest grundlæggende og vigtige funktioner i CSS. Det er en måde at vælge specifikke elementer på en webside og at anvende styling til disse elementer. Selectors kan hjælpe dig med at skrive mere effektiv og smartere CSS-kode.

Der er mange forskellige typer af selectors, inklusiv:

• Element selectors: Vælger alle elementer af en bestemt type, f.eks. alle <p>elementer.
• ID selectors: Vælger et enkelt element med et bestemt ID, f.eks. <div id="header">.
• Class selectors: Vælger alle elementer med en bestemt class, f.eks. <p class="intro">.
• Attribute selectors: Vælger elementer med en bestemt attribut, f.eks. <a href="<https://google.com>">.

For at anvende en selector, skal du skrive selector-navnet efterfulgt af de styling-regler, du vil anvende. For eksempel:

p {
  color: blue;
}

#header {
  font-size: 24px;
}

.intro {
  font-weight: bold;
}

a[href="<https://google.com>"] {
  text-decoration: none;
}

Det er også muligt at anvende flere selectors på samme tid ved at adskille dem med et komma. For eksempel:

p, #header {
  color: blue;
}

JavaScript kan også anvendes til at manipulere CSS-selectors. For eksempel kan du bruge document.querySelector()-funktionen til at vælge et enkelt element og anvende styling til det. For eksempel:

const header = document.querySelector('#header');
header.style.fontSize = '24px';

CSS-selectors er en vigtig del af webudvikling, og ved at lære at anvende dem kan du skrive mere effektiv og smartere CSS-kode.

Et spil hvor man skal bruge CSS-selectors til at løse små opgaver, kan findes her:

CSS Diner - CSS Selectors