NemProgrammering.dk logo
3 måneders gratis webhotel til alle NemProgrammering.dk brugere! Få din UnoEuro Rabatkode her
UnoEuro rabatkode

Child og descendant selektorer i CSS

CSS kursus | Lær CSS for begyndere
WordPress hjemmeside hjælp

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

<!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="Lektion15.css">
</head>
<body>
  <div class="div1">

      <p>Div1 <span>SPAN</span> Div1 Div1 Div1</p>
      <span>SPAN</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

.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 selector */
div p {
  font-size: 30px;
}

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


/* Child selector */
div > p {
  font-size: 30px;
  color: blue;
}

.div2 > p {
  text-decoration: underline;
}

        

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar ved tasterne.

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

kommentar på NemProgrammering.dk - lav din egen hjemmeside
René Christensen    16-08-2018

Lyden i videoen kunne godt blive en smule optimeret