HTML for Kids · Lektion

Selectortyper

Lektion 1 af 121 trin

Selectortyper er en gratis HTML for Kids-lektion på CoddyKit. Dette er lektion 1 af 1. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i HTML for Kids, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML for Kids-kurset indeholder 1 lektioner i alt.

Introduktion

Hej

I denne lektion udbygger vi din viden om CSS med mere komplekse selectorer.

Flere style-definitioner

Vi kan lave flere style-definitioner ved at sætte semikoloner mellem hver style.

.first{
   color:blue;
   font-size:20px;
   text-align: center;
}

Der er et HTML-dokument, som bliver mere komplekst

Indtil videre har vi arbejdet med simple tag-, id- og klasseselectorer. Men i nogle tilfælde, når brugergrænsefladen bliver mere kompleks, får vi brug for mere komplekse selectorer.

I eksemplet nedenfor er der et HTML-dokument, som bliver mere komplekst.

<body>
	<div id="my-area">
		<p class="first">lorem</p>
		<div class="second">
				<p class="third">Ipsum</p>
	</div>
  </div>
</body>

Analysér eksemplet

Lad os analysere vores kode nu.

Der er en div med my-area-id'et, som fungerer som en container i sidens body. Den er ancestor for alle elementerne under denne div.
p-elementet med first-klassen er sibling til div-elementet med second-klassen.
Det tredje element er child af det andet element, og my-area-elementet kan betragtes som ancestor til det tredje element.

Advarsel

Du kan betragte HTML-layoutet som et bogstaveligt stamtræ.

Du kan arve genetiske egenskaber fra din bedstefar.

Men hvis denne arv ændres hos din far, bliver farens gen mere dominerende, og egenskaben fra din bedstefar ændres.

Kombinationer af selectorer

Lad os nu se, hvordan man laver kombinationer i selectorer.

Følgende udsagn angiver, at elementet med den anden klasse er descendant (child eller grandchild) af elementet med den tredje klasse.

Hvis der er et mellemrum mellem de to klasser, betyder det, at klassen til venstre leder efter en descendant.

.second .third{
	color:red;
}

Child-selector

I eksemplet nedenfor

betyder det, at den tredje klasse, som er child af den anden klasse, skal vælges.

Større-end-tegnet betyder, at child-elementet for det relevante element skal vælges.

.second > .third{
	color:red;
}

Vi kan kombinere tag- og klasseselectorer for at vælge et element

Samtidig kan vi kombinere tag- og klasseselectorer for at vælge et element.

Eksemplet nedenfor vælger p-elementer med den tredje klasse.

<style>

p.third{
	color:red;
}

</style>


<p class="third">Hello CSS</p>

Antag, at vi vil vælge en div med den første klasse

Antag, at vi vil vælge en div med den første klasse.

I eksemplet nedenfor betyder det, at elementet med den første klasse skal vælges, og at det er child af div-elementet med my-area-id'et.

Det øger specificiteten for det element, der skal vælges.


div#my-area > .first{
color:red;
}

Vælg alle

Stjernetegnet (*) er vigtigt blandt selectorer.

Det betyder, at alt skal vælges.

I eksemplet nedenfor angiver selectoren, at elementet med my-area-id'et skal vælge alle descendants.

Det vigtige her er, at det ikke kun er children, men alle descendants.

Hvis vi kun ville vælge children, skulle vi sætte større-end-tegnet foran stjernen.

/* It chooses all the descendants of #my-area. */
#my-area *{
	color:red;
}

/* It chooses all the children of #my-area. */
#my-area > *{
	color:red;
}

Selector for tilstødende siblings

Vi har brugt descendant-selector og child-selector, og nu skal vi lære om sibling-selector.

Sibling-selectoren bruger +-tegnet til at vælge den næste sibling.

I vores eksempel bliver baggrundsfarven for det tredje p-element gul med denne selector.

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

Selector for generelle siblings

Hvis vi ikke kun vil vælge den første næste sibling, men alle efterfølgende siblings, bruger vi tilde-tegnet (~).

Tilde-symbolet er allerede kendt som kombinatoren for efterfølgende siblings.

<style>

div ~ p {
  background-color: red;
}

</style>

<p>Paragraph 1.</p>
<div>
  <p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>

Pseudo-klasser og CSS-klasser

Udtryk, som ikke er en klasse, men opfører sig som en klasse, kaldes pseudo-klasser.

Vi definerer ikke pseudo-klasser for elementer i HTML.

Når browseren fortolker koden, antager den, at de findes. Derfor kan vi bruge pseudo-klasser i CSS-selectorer.

Pseudo-klassen :hover

Blandt pseudo-klasserne er :hover uden tvivl den bedst kendte.

Hover (:hover) er en pseudo-klasse, som automatisk defineres for det relevante element i browseren, når musen holdes over elementet.

Pseudo-klasser bruges efter kolon-tegnet (:) i selector-udtrykket.

Syntaksen for brug af en pseudo-klasse er vist i eksemplet nedenfor.

selector:pseudo-class {
   property: value;
}

Style links med :hover

Lad os nu oprette et link og se, hvordan det ser ud, når du holder musen over det.

Advarsel: Da der ikke findes en hover-hændelse som på web på mobile enheder, kan denne effekt ikke ses i Coddykit-mobilapplikationer.

I eksemplet nedenfor kan vi se, at linkets farve bliver grøn, når vi holder musen over det.

<!DOCTYPE html>
<html>
<head>
<style>

.my-link{
	color:red;
	}

.my-link:hover{
	color:green;
}

</style>
</head>
<body>

<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>

</body>
</html>

Pseudo-klassen :first-child

En af de mest forvirrende pseudo-klasser er :first-child.

Normalt kan vi ud fra navnet udlede, at den vælger det første child-element i et element.

Denne slutning er faktisk ikke korrekt.

Den bruges til at vælge det første element blandt elementets siblings.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the first p element 
among children of the my-box class. */

.my-box p:first-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

Pseudo-klassen :last-child

last-child er det modsatte af pseudo-klassen first-child. Den bruges til at vælge det sidste element blandt elementets siblings.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the last p element 
among children of the my-box class. */

.my-box p:last-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

Pseudo-elementet ::before

Hvis vi vil tilføje noget før et element, bruges pseudo-selectoren ::before.

I eksemplet nedenfor tilføjede vi indholdet 'Hello' før header-elementer.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::before {
			content: "Hello ";
	}
</style>
</head>
<body>

<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>

</body>
</html>

Pseudo-elementet ::after

Pseudo-elementet ::after, som er det modsatte af pseudo-elementet ::before, bruges til at tilføje nyt indhold efter elementet.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::after {
			content: " Coddykit";
	}
</style>
</head>
<body>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

</body>
</html>

Liste over pseudoklasser

Vi har lært de mest anvendte pseudoklasser. Der findes dog snesevis flere.

Du kan finde en liste over alle pseudoklasser via linket nedenfor. Du kan bruge enhver af dem, når du har brug for det.

Tillykke

Tillykke 🎉

I dette afsnit lærte vi selektortyper.

I næste afsnit lærer vi de mest anvendte CSS-egenskaber

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 16
Lektioner: 35

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Selectortyper” gratis?

Ja — hele teksten til “Selectortyper” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af HTML for Kids-kurset, skal du opgradere til CoddyKit PRO. HTML for Kids-kurset indeholder 1 lektioner i alt.

Hvad lærer jeg i “Selectortyper”?

Selectortyper Du øver dig i HTML for Kids med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML for Kids?

Der kræves ingen tidligere erfaring. HTML for Kids på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 1.

Hvor lang tid tager lektionen “Selectortyper”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML for Kids-lektion?

Ja. Alle HTML for Kids-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

← Tilbage til HTML for Kids