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:
<!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>
.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;
}
Lyden i videoen kunne godt blive en smule optimeret
