NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Child og descendant selektorer i CSS

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne video skal vi kigge på, hvordan du kan bruge child og descendant selektorer til at præcisere og begrænse, hvor en given CSS regel skal gælde.

Øvelse:
1 - Lav en div, med en unordered liste indeni, hvor listen indeholder et paragraf-element i det første list-item. Lav en CSS kombination som rammer lige netop paragraf-elementet og styler det med farven rød.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS, child og descendant selektorer

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 15</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        
        <div class="div1">
            
            <p>Div1 <span>Div1</span> Div1 Div1 Div1</p>
            <span>Div1</span>
            
        </div> <br/>
        
        <div class="div2">
                
            <p>Div2 Div2 Div2 Div2 Div2</p>
                
        </div> <br/>
        
        <div class="div3">
                
            <ul>
                <li><p>Div3 Div3 Div3 Div3 Div3</p></li>
            </ul>
                
        </div>
        
        <p>Tekst Tekst Tekst Tekst Tekst</p>
  
     
    </body>
</html>   
        

Her har du kildekoden

/* CSS filen */
.div1 {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

.div2 {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
.div3 {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

/* decendant */
div p {
    font-size: 30px;
}

div p span {
    font-size: 50px;
}

/* child */

div > p {
    color: blue;
}

.div2 > p {
    color: red;
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

Vær den første til at skrive en kommentar!

Forum stats

  • 1114 Antal brugere
  • 1583 Antal emner
  • 7953 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside