Pages

Question d'examen

HTML

<section>

  <div id="div1" class="sel">div 1</div>

  <div id="div2" class="sel">div 2</div>

  <div id="div3">div 3</div>

  <div id="div4">div 4</div>

</section>


Quelles régles selectionnent les deux premiers DIV
  1. #div1 #div2
  2. div:nth-child(-n+2)
  3. div:not(div+div+div)
  4. [class^="sel"]
  5. #div1 && #div2
  6. div:not(div:nth-last-child(3) ~ div)
  7. [class="sel"]
  8. div:not(div~div+div)
  9. div:first-child,  div:first-child+div
  10. div:nth-child(1), div:nth-child(2)
  11. div:nth-of-tydive(-n+2)
  12. div:not(div:nth-child(n+3))
  13. [class$="sel"]
  14. [id="div2"],[id="div1"]
  15. div:nth-last-child(n+3)
  16. div[class]
  17. div:not(div:nth-last-child(-n+2))
  18. div:not(#div3,#div4)
  19. div:not(#div3,div:last-child)
  20. div:not(*+*+*)

Exemple 1 : la règle 1 selectionne une balise d'identifiant #div2 descendant d'une
balise d'id #div1.
Or, #div2 est *frère* de #div1, cette régle ne selectionne pas les deux premiers div.
  1. 😡#div1 #div2
Exemple 2 : les valeurs Positives de -n+2 sont données dans le tableau

n

-n+2

0

2

1

1

2

0

3

-1

la règle 2 selectionne tous les enfants en position 1 et 2 de type DIV.
Comme #div1 est premier enfant et #div2 second enfant de section, cette régle selectionne les deux premiers div.
  1. 😡#div1 #div2
  2. ❎div:nth-child(-n+2)


Vous remplacez ?? par la règle à tester !

See the Pen test selecteur by dupont (@dupontcodepen) on CodePen.