Pages

Corrrection partie A

Mes solutions et dialogue avec Copilot !


A) Sélectionnez les deux premiers <p> avec quatre types de sélecteurs différents.

<p id="d1" class="s">p 1</p>

<p id="d2" class="s">p 2</p>

<p id="d3">p 3</p>

<p id="d4">p 4</p>








Quelques idées pour la selection (🚀tripadvisor)
  1. #item1, #item2 🚀🚀
  2. p:nth-child(-n+2)
  3. [class^="s"]
  4. [class$="s"]
  5. p:not(#d3,#d4)
  6. p:not(p+p+p) 
  7. p:not(p~p+p) 
  8. [class="s"]
  9. [id="d2"],[id="d1"]
  10. p:first-child,  p:first-child+p 🚀
  11. p:nth-child(1), p:nth-child(2) 🚀
  12. p:nth-last-child(n+3)
  13. p:nth-child(-n+2)
  14. p:not(#d3,p:last-child)
  15. p:nth-of-type(-n+2)
  16. p:not(p:nth-child(n+3))
  17. p[class]
  18. p:not(p:nth-last-child(-n+2))
  19. .s 🚀🚀
et une de vos solutions p:not( p:nth-last-child(3)~p)

Dialogue avec Copilot :


Il a eu un long dialogue pour lui demander de ne pas utiliser ce type de selecteurs : 

  1. :root p:nth-child(1), ::root p:nth-child(2) - Selects the first and second child of the parent within the root
  2. body > p:nth-child(1), body > p:nth-child(2) - Selects the first and second child of the parent within the body
  3. html > body > p:nth-child(1), html > body > p:nth-child(2) - Selects the first and second child of the parent within the body within the html
J'ai beaucoup aimé la remarque de Copilot concernant la structure de HTML. 


Please note that some of these selectors might not work as expected if there are other elements in the body before the paragraphs.

 
Voici une réponse Copilot : 

p:first-child, p:first-child + p,
p:nth-child(1), p:nth-child(2),
p:nth-of-type(1), p:nth-of-type(2),
#d1, #d2,
.s:first-child, .s:first-child + .s,
.s:nth-child(1), .s:nth-child(2),
.s:nth-of-type(1), .s:nth-of-type(2),
p[id='d1'], p[id='d2'],
p.s:first-child, p.s:first-child + p.s,
p.s:nth-child(1), p.s:nth-child(2),
p.s:nth-of-type(1), p.s:nth-of-type(2),
p[id^='d']:first-child, p[id^='d']:first-child + p,
p[id^='d']:nth-child(1), p[id^='d']:nth-child(2),
p[id^='d']:nth-of-type(1), p[id^='d']:nth-of-type(2),
p.s[id^='d']:first-child, p.s[id^='d']:first-child + p,
p.s[id^='d']:nth-child(1), p.s[id^='d']:nth-child(2),
p.s[id^='d']:nth-of-type(1), p.s[id^='d']:nth-of-type(2),
p[id*='d']:first-child, p[id*='d']:first-child + p,
p[id*='d']:nth-child(1), p[id*='d']:nth-child(2),
p[id*='d']:nth-of-type(1), p[id*='d']:nth-of-type(2) {
    border: 1px solid;
}

Voici quelques remarques : 
🥷Why not use the :not selector, it's an oversight on your part.

GitHub Copilot
I apologize for the oversight. You're right, the :not selector can be used to exclude certain elements.

 Here are four CSS selectors using the :not pseudo-class to select the first two paragraphs:
  1. p:not(:nth-of-type(n+3)) - Selects the first two paragraphs, and not any paragraph from the third onwards.
  2. p:not(:nth-child(n+3)) - Selects the first two paragraphs, and not any child from the third onwards.

Vous pourriez également demander à copilot d'utilier last-child !