CSS - Selektorer

I CSS bruker vi selektorer (utvelgere) for å fortelle nettleseren nøyaktig hvilke HTML-elementer vi ønsker å style. Vi kan dele selektorer inn i ulike kategorier basert på hvordan de velger elementer.

1. Enkle selektorer (Simple Selectors)

Velger elementer basert på navnet, ID-en eller klassen deres. Dette er de mest grunnleggende og desidert mest brukte selektorene.

Universalselektor: Bruker en stjerne (*). Velger absolutt alle elementer på siden (brukes ofte for å nullstille marger).
Elementselektor: Velger alle elementer av en bestemt type (f.eks. alle p-elementer).
Klasseselektor: Starter alltid med et punktum (.). Velger elementer med et spesifikt class-attributt uavhengig av elementtype.
ID-selektor: Starter med hashtag (#). Velger det ene unike elementet som har dette id-attributtet.

/* Universalselektor */
 * {
   margin: 0;
   padding: 0;
 }

 /* Elementselektor */
 p {
   color: blue;
 }

 /* Klasseselektor */
 .knapp {
   background: green;
 }

 /* ID-selektor */
 #hovedmeny {
   width: 100%;
 }

2. Kombinasjonsselektorer (Combinators)

Velger elementer basert på hvordan de er relatert til andre elementer. De beskriver et hierarki eller et naboskap i HTML-strukturen.

Etterkommer (Descendant): Bruker mellomrom. Velger elementer som befinner seg inni et annet, uansett hvor dypt de ligger.
Barn (Child): Bruker >. Velger elementer som er direkte barn (kun ett nivå ned).

/* Etterkommer: Velger alle <a> inni en .meny */
 .meny a {
   text-decoration: none;
 }

 /* Barn: Velger bare <li> som er direkte inni .liste */
 .liste > li {
   margin-bottom: 10px;
 }

3. Pseudo-klasse selektorer (Pseudo-classes)

Velger elementer basert på en spesifikk tilstand de befinner seg i. De starter alltid med ett kolon (:).

:hover: Når brukeren holder musen over elementet.
:active: Akkurat i det øyeblikket elementet klikkes på.
:nth-child(): Velger et element basert på hvilken plass det har blant søsken i en liste eller et rutenett.

/* Endrer farge når musen holdes over knappen */
 .knapp:hover {
   background: darkgreen;
 }

 /* Velger annenhver rad i en tabell eller liste (partall) */
 li:nth-child(even) {
   background: #f2f2f2;
 }

4. Pseudo-element selektorer (Pseudo-elements)

Brukes for å velge og style en spesifikk del av et element, eller for å sette inn visuelt innhold. Starter med to kolon (::).

::before og ::after: Setter inn dekorativt innhold før eller etter elementet direkte fra CSS, uten at innholdet trenger å være i HTML-dokumentet.
::first-letter: Styler kun den aller første bokstaven i for eksempel et avsnitt.

/* Legger til en stjerne bak alle elementer merket som viktige */
 .viktig::after {
   content: " *";
   color: red;
 }

5. Attributtselektorer (Attribute Selectors)

Velger elementer basert på om de har et bestemt HTML-attributt, eller basert på verdien til dette attributtet. Skrives med klammeparenteser ([]).

[type="text"]: Velger for eksempel alle input-felter hvor type-attributtet er "text".
[required]: Velger alle felter som har "required"-attributtet aktivert i et skjema.

/* Styler kun passord-felter i skjemaet */
 input[type="password"] {
   border: 2px solid red;
 }

6. Gruppering av selektorer (Grouping)

Hvis flere forskjellige selektorer skal ha nøyaktig samme styling, kan vi skille dem med et komma (,). Dette sparer oss for å skrive den samme koden flere ganger.

/* Gir samme styling til h1, h2 og elementer med klassen .ingress */
 h1, h2, .ingress {
   font-family: Arial, sans-serif;
   color: #333;
 }