dupontL1: juin 2022

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.

<p>AAAAA</p> </div>

<p class="alert">BBBBBB</p>

</div>

<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

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 = " }

Pages

Examen