Selektortyper
Selektortyper
Selektortyper är en gratis lektion i HTML for Kids på CoddyKit. Detta är lektion 1 av 1. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för HTML for Kids, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML for Kids innehåller totalt 1 lektioner.
Introduktion
Hej!
I den här lektionen fördjupar vi våra kunskaper i CSS med mer komplexa selektorer.
Flera stildefinitioner
Vi kan skapa flera stildefinitioner genom att sätta semikolon mellan varje stil.
.first{
color:blue;
font-size:20px;
text-align: center;
}det finns ett HTML-dokument som blir mer komplext
Hittills har vi arbetat med enkla tagg-, id- och klasseselektorer. I vissa fall, när användargränssnittet blir mer komplext, behöver vi dock använda mer komplexa selektorer.
I exemplet nedan finns ett HTML-dokument som blir mer komplext.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>analysera exemplet
Nu ska vi analysera vår kod.
- Det finns en div med id:t my-area som fungerar som en behållare i sidans body. Den är förfader till alla element under denna div.
- p-elementet med klassen first är syskon till div-elementet med klassen second.
- Det tredje elementet är barn till det andra elementet, och elementet my-area kan betraktas som det tredje elementets förfader.
Varning
Ni kan tänka på HTML-layouten som ett bokstavligt släktträd.
Ni kan ärva genetiska egenskaper från er farfar.
Men om den här arvsinformationen förändras hos er far blir faderns gen mer dominant, och egenskapen från farfadern förändras.
Kombinationer av selektorer
Nu ska vi se hur man skapar kombinationer av selektorer.
Följande uttryck anger att elementet med klassen second är en ättling (ett barn eller barnbarn) till elementet med klassen third.
Om det finns ett mellanslag mellan de två klasserna betyder det att klassen till vänster söker efter en ättling.
.second .third{
color:red;
}Barnselektor
I exemplet nedan
innebär det att klassen third, som är barn till klassen second, ska väljas.
Större än-tecknet innebär att barnet till det aktuella elementet ska väljas.
.second > .third{
color:red;
}vi kan kombinera tagg- och klasseselektorn för att välja ett element
Samtidigt kan vi kombinera tagg- och klasseselektorn för att välja ett element.
Exemplet nedan väljer p-element med klassen third.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Anta att vi vill välja en div med klassen first
Anta att vi vill välja en div med klassen first.
I exemplet nedan innebär det att elementet med klassen first, som är barn till div-elementet med id:t my-area, ska väljas.
Detta ökar specificiteten för elementet som ska väljas.
div#my-area > .first{
color:red;
}Välja alla
Asterisktecknet (*) är viktigt bland selektorer.
Det innebär att alla element väljs.
I exemplet nedan innebär selektorn att alla ättlingar till elementet med id:t my-area ska väljas.
Det viktiga att vara medveten om här är att det inte bara gäller barn utan alla ättlingar.
Om vi bara ville välja barn skulle vi behöva sätta större än-tecknet före asterisken.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Selektor för intilliggande syskon
Vi har använt en ättlingselektor och en barnselektor. Nu ska vi lära oss om syskonselektorn.
Syskonselektorn använder plustecknet + för att välja nästa syskon.
I vårt exempel färgläggs bakgrunden för det tredje p-elementet gul av selektorn.
<!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>Selektor för allmänna syskon
Om vi inte bara vill välja det första efterföljande syskonet utan alla syskon som följer använder vi tilde-tecknet (~).
Tilde-symbolen kallas även kombinatorn för efterföljande syskon.
<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>
Pseudoklasser och CSS-klasser
Uttryck som inte är en klass men fungerar som en klass kallas pseudoklasser.
Vi definierar inte pseudoklasser för något element i HTML.
När webbläsaren tolkar koden antar den att de finns. Därför kan vi använda pseudoklasser i CSS-selektorer.
Pseudoklassen :hover
Bland pseudoklasserna är :hover utan tvekan den mest kända.
Hover (:hover) är en pseudoklass som automatiskt definieras för webbläsaren på det aktuella elementet när muspekaren förs över elementet.
Pseudoklasser används efter kolon-tecknet (:) i selektoruttrycket.
Syntaxen för hur en pseudoklass används visas i exemplet nedan.
selector:pseudo-class {
property: value;
}Formge länkar med :hover
Nu ska vi skapa en länk och se hur den ser ut när ni för muspekaren över den.
Varning: Eftersom mobila enheter inte har någon hover-händelse som på webben visas denna effekt inte i Coddykit-mobilapplikationer.
I exemplet nedan ser vi att länkens färg blir grön när vi för muspekaren över länken.
<!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>Pseudoklassen :first-child
En av de mest förvirrande pseudoklasserna är :first-child.
Vanligtvis kan vi utifrån namnet dra slutsatsen att det första barnet till ett element ska väljas.
Denna slutsats är faktiskt inte korrekt.
Den används för att välja det första elementet bland elementets syskon.
<!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>Pseudoklassen :last-child
last-child är motsatsen till pseudoklassen first-child. Den används för att välja det sista elementet bland elementets syskon.
<!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>Pseudoelementet ::before
Om vi vill lägga till något före ett element används pseudoselektorn ::before.
I exemplet nedan lade vi till innehållet 'Hello' före rubrikelementen.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Pseudoelementet ::after
Pseudoelementet :: after, som är motsatsen till pseudoelementet :: before, används för att lägga till nytt innehåll 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>Lista över pseudoklasser
Vi har lärt oss de vanligaste pseudoklasserna. Det finns dock dussintals fler.
Ni hittar en lista över alla pseudoklasser via länken nedan. Ni kan använda vilken som helst av dem när ni behöver det.
Grattis
Grattis 🎉
I det här avsnittet har vi lärt oss selektortyper.
I nästa avsnitt ska vi lära oss de vanligaste CSS-egenskaperna
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 16
- Lektioner
- 35
Vanliga frågor
Är lektionen ”Selektortyper” gratis?
Ja – hela texten till ”Selektortyper” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i HTML for Kids, kan Ni uppgradera till CoddyKit PRO. Kursen i HTML for Kids innehåller totalt 1 lektioner.
Vad lär jag mig i ”Selektortyper”?
Selektortyper Ni övar på HTML for Kids med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML for Kids?
Du behöver inga förkunskaper. Utbildningen i HTML for Kids på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 1.
Hur lång tid tar lektionen ”Selektortyper”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML for Kids-lektionen?
Ja. Varje HTML for Kids-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.