Simulateur Maison !

🥷For free

https://dupontdenis.github.io/TestSelecteurDemo/

A quoi sert la maitrise des sélecteurs !

A comparer avec

DS : 10 minutes

Trouvez 3 selecteurs qui sélectionne uniquement le paragraphe avec Mickey.

<h1>Demo of the .class selector</h1>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Pluto.</p>
<p data-search="true" class="intro">My best friend is Mickey.</p>

Plus d'infos »

Code HTML

<div class="top">div : class top
<h1>h1</h1>
<ul id="tmpPlants" class="tmpExample">
<li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
<li class="A tmpExample" id="b">li : class =A id=b</li>
<li class="B tmpExample" id="c">li : class =B id=c</li>
</ul>
<footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple :

Selecteurs ('h1')

------------- Auto correction

div : class top

h1

li : class =A et B id=item.A
li : class =A id=b
li : class =B id=c

Encadrez la selection ('ul, li')
Encadrez la selection ('li:not(#b)')
Encadrez la selection ( "#item.A" )
Encadrez la selection ( ".A.B" )
Encadrez la selection ( ".top :first-child" )
Encadrez la selection ( "ul:first-child" )
Encadrez la selection ( "li:not(:hover)" )
Encadrez la selection ( "li.B + *" )
Encadrez la selection (".top :nth-child(2)")
Encadrez la selection (".top :nth-of-type(1)")
Encadrez la selection $(".top :not(:last-child)")

DM

Indiquez les lignes selectionnées par le selecteur

🆘Exemple :

<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

article>h1

ligne(s)

2,6,7,8

rien

🪛A compléter

<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
	p:nth-child(2)
	article :last-child:not(p)
	[class $="n"]
	article :nth-of-type(-n+1)