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)

#item1, #item2 🚀🚀
p:nth-child(-n+2)
[class^="s"]
[class$="s"]
p:not(#d3,#d4)
p:not(p+p+p)
p:not(p~p+p)
[class="s"]
[id="d2"],[id="d1"]
p:first-child, p:first-child+p 🚀
p:nth-child(1), p:nth-child(2) 🚀
p:nth-last-child(n+3)
p:nth-child(-n+2)
p:not(#d3,p:last-child)
p:nth-of-type(-n+2)
p:not(p:nth-child(n+3))
p[class]
p:not(p:nth-last-child(-n+2))
.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 :

:root p:nth-child(1), ::root p:nth-child(2) - Selects the first and second child of the parent within the root
body > p:nth-child(1), body > p:nth-child(2) - Selects the first and second child of the parent within the body
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:

p:not(:nth-of-type(n+3)) - Selects the first two paragraphs, and not any paragraph from the third onwards.
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 !

Array

Cours : 🗄️ Les tableaux !

Objectifs du cours

Quels codes donnent les nombre pairs, impairs, positifs, multiples de 2 ....

Trouvez le code pour

Objectifs du cours

🥷Passez au niveau Sup

Les tableaux

Les fonctions avec des tableaux

Rappels sur les Tableaux.

🥷Simulez les méthodes

🪛Exemples de code

const pers = [
  {
    nom: "Dupont",
    ville: "Evry",
    sex: "f",
  },
  {
    nom: "Brusel",
    ville: "Belfort",
    sex: "h",
  },

  {
    nom: "Dupont",
    ville: "PARIS",
    sex: "f",
  },
  {
    nom: "Durant",
    ville: "Paris",
    sex: "h",
  },
];

// have fun with for of
function affiche(tab, callback) {
  for (let [i, ele] of Object.entries(tab)) {
    console.log(callback ? callback(ele, i) : `${i}->${ele.nom}`);
  }
}

affiche(pers);
affiche(pers, ({ nom: name, ville: town }) => `${name} lives in ${town}`);

function afficheVille({ ville }, i) {
  return `${i} : ${ville}`;
}

affiche(pers, afficheVille);

// transforme
function transf(array, fx) {
  let passed = [];

  for (let v of array) passed.push(fx(v));

  return passed;
}

//
function civilite({ nom, sex }) {
  return sex == "h" ? `Monsieur ${nom}` : `Madame ${nom}`;
}

const newT = transf(pers, civilite);
console.log(newT);

//
function normalise(pers) {
  return (pers.ville = pers.ville.toUpperCase());
}
transf(pers, normalise);
console.table(pers);