Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

5 files changed, 76 insertions, 76 deletions

diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
index 94b5601bf6..f56a321023 100644
--- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 
 <p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis&nbsp;:</th>
@@ -121,8 +121,8 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>
+<div class="note">
+<p><strong>Note :</strong> Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>
 </div>
 
 <h2 id="Pas_suivants">Pas suivants</h2>
diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.html b/files/fr/learn/css/building_blocks/selectors/combinators/index.html
index 7a63a06d36..ecef10ea21 100644
--- a/files/fr/learn/css/building_blocks/selectors/combinators/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.html
@@ -12,11 +12,11 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 <p>Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis:</th>
-   <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td>
+   <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td>
   </tr>
   <tr>
    <th scope="row">Objectif:</th>
@@ -29,7 +29,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 <p>Le <strong>combinateur descendant</strong>— en général représenté par un seul espace (<code> </code>) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.</p>
 
-<pre class="brush: css notranslate">body article p
+<pre class="brush: css">body article p
 </pre>
 
 <p>Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <code>&lt;p&gt;</code>, qui est à l'intérieur d'un élément de classe <code>.box</code>.</p>
@@ -40,7 +40,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 <p>Le combinateur enfant (<code>&gt;</code>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <code>&lt;p&gt;</code> qui sont des enfants directs des éléments <code>&lt;article&gt;</code>:</p>
 
-<pre class="brush: css notranslate">article &gt; p</pre>
+<pre class="brush: css">article &gt; p</pre>
 
 <p>Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <code>&lt;li&gt;</code> qui sont un enfant direct d'un <code>&lt;ul&gt;</code>, et leur ai donné une bordure supérieure.</p>
 
@@ -52,7 +52,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 <p>Le sélecteur de frère adjacent (<code>+</code>) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <code>&lt;img&gt;</code> qui viennent juste après les éléments <code>&lt;p&gt;</code>:</p>
 
-<pre class="brush: css notranslate">p + img</pre>
+<pre class="brush: css">p + img</pre>
 
 <p>Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <code>&lt;h1&gt;</code>, et le stylisons.</p>
 
@@ -64,7 +64,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 <p>Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (<code>~</code>). Pour sélectionner tous les éléments <code>&lt;img&gt;</code> qui viennent n'importe où après les éléments <code>&lt;p&gt;</code>, nous ferions ceci:</p>
 
-<pre class="brush: css notranslate">p ~ img</pre>
+<pre class="brush: css">p ~ img</pre>
 
 <p>Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <code>&lt;p&gt;</code> qui viennent après le <code>&lt;h1&gt;</code>, et même s'il y a aussi un <code>&lt;div&gt;</code> dans le document, le <code>&lt;p&gt;</code> qui vient après qu'il est sélectionné.</p>
 
@@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 <p>Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <code>&lt;ul&gt;</code>, je pourrais utiliser ce qui suit.</p>
 
-<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+<pre class="brush: css">ul &gt; li[class="a"]  {  }</pre>
 
 <p>Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.</p>
 
@@ -82,7 +82,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 <h2 id="Testez_vos_compétences!">Testez vos compétences!</h2>
 
-<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p>
+<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p>
 
 <h2 id="Passer_à_la_suite">Passer à la suite</h2>
 
@@ -93,10 +93,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ol>
- <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li>
    <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a></li>
    <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments">Pseudo-classes and pseudo-élements</a></li>
    <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs">Combinateurs</a></li>
@@ -104,12 +104,12 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
  </li>
  <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">Le modèle de Boîte</a></li>
  <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li>
  <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content">Débordement de contenu</a></li>
  <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">Valeurs et unités</a></li>
  <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Taille des élements</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li>
  <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li>
  <li><a href="/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html
index 2ba25e54d4..ece86d8018 100644
--- a/files/fr/learn/css/building_blocks/selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/index.html
@@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors
 
 <p>Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis&nbsp;:</th>
@@ -25,7 +25,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors
 
 <p>Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet</em> de ce sélecteur.</p>
 
-<p><img alt="Du code où h1 est surligné." src="selector.png" style="border: 1px solid #cccccc;"></p>
+<p><img alt="Du code où h1 est surligné." src="selector.png"></p>
 
 <p>Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p>
 
diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
index f7d62596c1..8e89104fdd 100644
--- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
@@ -14,13 +14,13 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
 ---
 <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
 
-<p>Voyons maintenant les sélecteurs de<span> <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</span></p>
+<p>Voyons maintenant les sélecteurs de <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
-   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+   <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
   </tr>
   <tr>
    <th scope="row">Objectif :</th>
@@ -35,7 +35,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
 
 <p>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p>
 
-<pre class="notranslate">:<em>pseudo-class-name</em></pre>
+<pre>:<em>pseudo-class-name</em></pre>
 
 <h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3>
 
@@ -50,17 +50,17 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
 <p>Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :</p>
 
 <ul>
- <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li>
- <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li>
- <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/:last-child">:last-child</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/:only-child">:only-child</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/:invalid">:invalid</a></code></li>
 </ul>
 
 <h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3>
 
 <p>Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées <em>pseudo-classes dynamiques</em>, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :</p>
 
-<p><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br>
- <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p>
+<p><code><a href="/fr/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br>
+ <code><a href="/fr/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>
 
@@ -68,10 +68,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
 
 <p>Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points <code>::</code>.</p>
 
-<pre class="notranslate"><em>::pseudo-element-name</em></pre>
+<pre><em>::pseudo-element-name</em></pre>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p>
+<div class="note">
+<p><strong>Note :</strong> Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p>
 </div>
 
 <p>Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément &lt;span&gt; et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.</p>
@@ -88,14 +88,14 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
 
 <p>Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs <code>:first-child</code> et <code>::first-line</code> Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <code>&lt;p&gt;</code>, qui se trouve à l'intérieur d'un élément <code>&lt;article&gt;</code></p>
 
-<pre class="brush: css notranslate"><code>article p:first-child::first-line {
+<pre class="brush: css">article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
-}</code></pre>
+}</pre>
 
 <h2 id="Générer_du_contenu_avec_before_et_after">Générer du contenu avec ::before et ::after</h2>
 
-<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/en-US/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p>
+<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/fr/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p>
 
 <p>Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément <code>::before</code> en  <code>::after</code> et voir le texte inséré à la fin de l'élément au lieu du début.</p>
 
@@ -139,7 +139,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
   </tr>
   <tr>
    <td>{{ Cssxref(":blank") }}</td>
-   <td>Matches an <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code> element</a> whose input value is empty.</td>
+   <td>Matches an <a href="/fr/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code> element</a> whose input value is empty.</td>
   </tr>
   <tr>
    <td>{{ Cssxref(":checked") }}</td>
@@ -155,7 +155,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
   </tr>
   <tr>
    <td>{{ Cssxref(":dir") }}</td>
-   <td>Select an element based on its directionality (value of the HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> property).</td>
+   <td>Select an element based on its directionality (value of the HTML <code><a href="/fr/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/fr/docs/Web/CSS/direction">direction</a></code> property).</td>
   </tr>
   <tr>
    <td>{{ Cssxref(":disabled") }}</td>
@@ -171,7 +171,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
   </tr>
   <tr>
    <td>{{ Cssxref(":first") }}</td>
-   <td>In <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td>
+   <td>In <a href="/fr/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td>
   </tr>
   <tr>
    <td>{{ Cssxref(":first-child") }}</td>
@@ -203,7 +203,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
   </tr>
   <tr>
    <td>{{ Cssxref(":indeterminate") }}</td>
-   <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td>
+   <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/fr/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td>
   </tr>
   <tr>
    <td>{{ Cssxref(":in-range") }}</td>
@@ -215,7 +215,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
   </tr>
   <tr>
    <td>{{ Cssxref(":lang") }}</td>
-   <td>Matches an element based on language (value of the HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td>
+   <td>Matches an element based on language (value of the HTML <a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td>
   </tr>
   <tr>
    <td>{{ Cssxref(":last-child") }}</td>
@@ -227,7 +227,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
   </tr>
   <tr>
    <td>{{ Cssxref(":left") }}</td>
-   <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td>
+   <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td>
   </tr>
   <tr>
    <td>{{ Cssxref(":link")}}</td>
@@ -307,7 +307,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
   </tr>
   <tr>
    <td>{{ Cssxref(":right") }}</td>
-   <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td>
+   <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td>
   </tr>
   <tr>
    <td>{{ Cssxref(":root") }}</td>
@@ -378,23 +378,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index 33f687df82..376bfcb1cd 100644
--- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
@@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 
 <p>Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
@@ -39,7 +39,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 
 <h3 id="Utiliser_le_sélecteur_universel_pour_rendre_les_sélecteurs_plus_lisibles">Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles</h3>
 
-<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code>&lt;article&gt;</code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> :  </p>
+<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code>&lt;article&gt;</code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> :  </p>
 
 <pre class="brush: css">article :first-child {
 
@@ -84,7 +84,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p>
+<p><strong>Note :</strong> Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p>
 </div>
 
 <h2 id="Prochain_article">Prochain article</h2>
@@ -96,23 +96,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
 </ol>