Code HTML
<div class="top">div : class top</br><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')
Remarque : si vous le faites sous forme de DM aidez vous du simulateur.
------------- 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" ) lire article
- 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)")
Je vous ai programmé une correction : il vous suffit de cliquer sur le lien