Gå til innhold

Selektorer

Selektorer bestemmer hvilke HTML-elementer som skal styles. De er "adressen" som forteller CSS hvor stilene skal brukes.

Grunnleggende selektorer

Element-selektor

Velger alle elementer av en bestemt type.

p {
    color: blue;
}

<p>Denne blir blå</p>
<p>Denne også</p>
<span>Denne blir IKKE blå</span>

Klasse-selektor

Velger elementer med en bestemt klasse. Starter med . (punktum).

.highlight {
    background: yellow;
}

<p class="highlight">Gul bakgrunn</p>
<p>Ingen bakgrunn</p>
<p class="highlight">Gul bakgrunn</p>

Klasser kan gjenbrukes

Samme klasse kan brukes på mange elementer, og ett element kan ha flere klasser.

Flere klasser på ett element

<p class="highlight big center">Flere klasser!</p>

.highlight { background: yellow; }
.big { font-size: 24px; }
.center { text-align: center; }

ID-selektor

Velger ett spesifikt element med en bestemt ID. Starter med #.

#main-title {
    font-size: 48px;
}

<h1 id="main-title">Hovedtittel</h1>

ID er unik

En ID kan bare brukes én gang per side. Bruk klasser for gjenbrukbare stiler.

Sammenligning

Selektor Syntaks Gjenbrukbar Prioritet
Element p Alle av typen Lav
Klasse .navn Ja Medium
ID #navn Nei (én gang) Høy

Kombinerte selektorer

Flere elementer

Velg flere elementer med samme stil:

h1, h2, h3 {
    font-family: Arial;
    color: navy;
}

Element med klasse

Velg bare elementer av en type med en bestemt klasse:

p.intro {
    font-size: 20px;
}

<p class="intro">Stor tekst (p med intro)</p>
<div class="intro">Normal tekst (div med intro)</div>

Etterkommere (Descendants)

Velg elementer som er inne i andre elementer:

article p {
    line-height: 1.8;
}

<article>
    <p>Denne får stilen</p>
    <div>
        <p>Denne også (inne i article)</p>
    </div>
</article>
<p>Denne får IKKE stilen</p>

Direkte barn

Velg bare direkte barn med >:

article > p {
    color: blue;
}

<article>
    <p>Direkte barn - BLÅ</p>
    <div>
        <p>Barnebarn - ikke blå</p>
    </div>
</article>

Nabo-element

Velg element som kommer rett etter et annet med +:

h2 + p {
    font-weight: bold;
}

<h2>Overskrift</h2>
<p>Denne blir bold (rett etter h2)</p>
<p>Denne blir IKKE bold</p>

Pseudo-klasser

Pseudo-klasser velger elementer i en bestemt tilstand. Starter med :.

:hover

Når musen er over elementet:

a:hover {
    color: red;
}

button:hover {
    background: darkblue;
}

:focus

Når elementet er i fokus (klikket på eller tabbet til):

input:focus {
    border-color: blue;
    outline: none;
}

:active

Når elementet klikkes på:

button:active {
    transform: scale(0.95);
}

:first-child og :last-child

Første eller siste barn:

li:first-child {
    font-weight: bold;
}

li:last-child {
    border-bottom: none;
}

<ul>
    <li>Første (bold)</li>
    <li>Andre</li>
    <li>Tredje (ingen border)</li>
</ul>

:nth-child()

Velg basert på posisjon:

/* Annenhver rad */
tr:nth-child(even) {
    background: #f2f2f2;
}

tr:nth-child(odd) {
    background: white;
}

/* Hvert tredje element */
li:nth-child(3n) {
    color: red;
}

/* De tre første */
li:nth-child(-n+3) {
    font-weight: bold;
}

:not()

Velg alt unntatt:

/* Alle p unntatt de med klassen "skip" */
p:not(.skip) {
    color: blue;
}

Pseudo-elementer

Pseudo-elementer lar deg style deler av et element. Starter med ::.

::before og ::after

Legg til innhold før eller etter:

.required::after {
    content: " *";
    color: red;
}

<label class="required">Navn</label>
<!-- Vises som: Navn * -->

::first-letter

Style første bokstav:

p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: navy;
}

::first-line

Style første linje:

p::first-line {
    font-weight: bold;
}

::selection

Style markert tekst:

::selection {
    background: yellow;
    color: black;
}

Attributt-selektorer

Velg basert på attributter:

/* Alle med href-attributt */
[href] {
    color: blue;
}

/* Spesifikk verdi */
[type="email"] {
    border-color: blue;
}

/* Starter med */
[href^="https"] {
    color: green;
}

/* Slutter med */
[href$=".pdf"] {
    color: red;
}

/* Inneholder */
[class*="btn"] {
    cursor: pointer;
}

Spesifisitet (Prioritet)

Når flere regler gjelder samme element, vinner den med høyest spesifisitet:

Inline style     → 1000 poeng
ID (#)           → 100 poeng
Klasse (.)       → 10 poeng
Element          → 1 poeng

Eksempel

p { color: black; }              /* 1 poeng */
.text { color: blue; }           /* 10 poeng */
#intro { color: green; }         /* 100 poeng */
p.text { color: red; }           /* 11 poeng */

<p id="intro" class="text">Hvilken farge?</p>
<!-- Svaret: GRØNN (ID har høyest prioritet) -->

Unngå ID for styling

Bruk klasser for CSS. IDs har for høy prioritet og kan være vanskelige å overstyre.

Vanlige mønstre

nav ul {
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #f0f0f0;
}

Skjema

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
}

input:focus {
    border-color: blue;
}

input:invalid {
    border-color: red;
}

Tabell med stripete rader

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
}

tr:nth-child(even) {
    background: #f9f9f9;
}

tr:hover {
    background: #f0f0f0;
}

Referanse

Se CSS-referansen for en komplett oversikt over selektorer og egenskaper.

Oppsummering

Selektor Eksempel Velger
Element p Alle <p>
Klasse .btn Alle med class="btn"
ID #header Element med id="header"
Gruppe h1, h2 Alle <h1> og <h2>
Etterkommer div p <p> inne i <div>
Barn div > p <p> direkte i <div>
Nabo h2 + p <p> rett etter <h2>
Pseudo-klasse a:hover Lenker ved hover
Pseudo-element p::first-letter Første bokstav i <p>
Attributt [type="email"] Input med type email