examen
A) Sélectionnez les deux premiers <div> avec quatre types de sélecteurs différents.
<div id="d1" class="s">div 1</div> <div id="d2" class="s">div 2</div> <div id="d3">div 3</div> <div id="d4">div 4</div>
|
|
|
|
|
B) Dessinez le résultat en 3D.
<section> <div class="A"> <p>AAAAA</p> </div> <div class="B"> <p class="alert">BBBBBB</p> </div> <div class="C"> <p>CCCCCC</p> </div> </section>
div { position: relative;}
p { margin:0;} | p.alert { z-index:1000; }
section>div:nth-child(2) { z-index: 1; position: absolute; }
section>div:nth-child(3) { z-index:2; background: black; color: white; } |
|
C)Donnez les code HTML et CSS pour la création d'un trombinoscope [<img> <p>, <p>] ( toujours 3 images par lignes )
D) Indiquez les lignes sélectionnées pour chaque sélecteur
<article> <p title="Strophe1" id="st"></p> <header> <h1></h1> <h2></h2> </header> <p class="refrain"></p> <p title="Strophe4" id="str"></p> <p class="refrain" id="ref4"></p> <footer> date (1880 - 1918) </footer></article>
| sélecteur | ligne(s) |
p + p |
|
p:nth-child(2) |
|
article :last-child:not(p) |
|
[class $="n"] |
|
article :nth-of-type(-n+1) |
|
Solutions
#item1, #item2 p:nth-child(-n+2) | p:not(p+p+p) p:not(p~p+p) | p:first-child, p:first-child+p p:nth-child(1), p:nth-child(2) | p:nth-of-type(-n+2) p:not(p:nth-child(n+3)) |
[class^="s"] [class$="s"] | [class="s"] [id="d2"],[id="d1"] | div:nth-last-child(n+3){ div:nth-child(-n+2) | div[class] div:not(div:nth-last-child(-n+2)) |
div:not(#d3,#d4) | | div:not(#d3,div:last-child) | |
https://codepen.io/dupontcodepen/pen/QWQGgPd
D)
https://dupontcss.blogspot.com/p/selecteurs.html
https://jsbin.com/cucarib/edit?html,css,output
[class $="n"] {
color:red;
}
article :last-child:not(p) {
background-color: lightblue;
}
article :nth-of-type(-n+1) {
border : 5px dotted green;
}
p + p:before{
content : " p + p = "
}
