Selectorer
Når vi skal definere hvilke elementer som skal treffes av en CSS-regel, bruker vi selectorer for å beskrive settet med elementer.
Tag-selectorer
body
, div
, img
, button
Treffer alle elementer med den gitte taggen.
body {
background-color: aliceblue;
}
button {
color: #1234ab;
}
Klasse-selectorer
.btn-danger
, .btn-ok
, .kall-det-hva-du-vil
Treffer alle elementer med den gitte klassen.
.btn-danger {
background-color: red;
}
.btn-ok {
background-color: green;
}
ID-selectorer
#hovedmeny
, #animasjon
IDer må være unike, fordi css-regler for en ID gjelder for første matchende element. Som regel ønsker vi ikke å bruke ID-selectorer, fordi det er å foretrekke at vi har css-stiler som kan gjenbrukes. Hvis vi må style hvert element for seg, kan det fort bli vanskelig å vedlikeholde et konsekvent grensesnitt.
#hovedmeny {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
}
Avanserte selectorer
Det er helt uproblematisk å style ting ved å definere selectors inni selectors, bruke attributtmatching, tilstandsselectorer osv:
a {
...;
} /* vanlig selector, .btn-ok */
a b {
...;
} /* nøstede, b må være inni a, .boks .heading */
a > b {
...;
} /* nøstede, b med a som nærmeste parent, .boks > .heading */
ab {
...;
} /* må ha både a og b, button.btn-ok, .btn.btn-ok */
a:state {
...;
} /* a:hover */
a:last-child {
...;
} /* siste av parent, li:last-child */
a:nth-child(2n + 1) {
...;
} /* alle n som matcher uttrykket */
a[attributt='verdi'] {
...;
} /* matcher på attributt, a:[href^="https://"] */
Men her må man holde tungen rett i munnen! Det enkleste er ofte det beste i css-verdenen, og flere mener det er best practice å ikke lage for kompliserte css-regler. På den måten blir det enklere både for fremtidige deg og for alle andre som skal jobbe med de samme stilene. Det er forøvrig ikke alltid like lett å vite hva salgs css-praksis som er lett å vedlikeholde over tid. Denne artikkelen forklarer hvordan Medium utviklet sine css-konvensjoner gjennom flere faser til de til slutt landet på noe de var rimelig fornøyd med.
Oppgave
Lag en CSS-fil og link til den i HTML-filen med knapper fra del 2.
Sett en bakgrunnsfarge på siden.
Endre font, farge og skriftstørrelse på teller-verdien.
Endre størrelse, bakgrunnsfarge, border/ramme og tekstfarge på knappene.
Last updated