Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:basescss [2022/08/25 12:29] – [CSS] phil
+++ web:basescss [2025/06/19 19:24] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 3: / Ligne 3: @@
 ===== WEB - Les bases du CSS =====
-[Mise à jour le 25/8/2022]
+[Mise à jour le 18/6/2023]
-  * **Source**
+  * **Ressources**
     * <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS" target="_blank">MDN web doc</a></html>
@@ Ligne 288: / Ligne 288: @@
 ==== 8. Sélecteurs avancés ====
+***** : **sélecteur universel**
+// Exemple //
+<code css *.css>
+/* Pour faire un RESET CSS on applique la même règle à toutes les balises */
+* {
+    /* Règle CSS */
+}
+</code>
+**A B : une balise contenue dans une autre**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises <em> contenues dans une balise <h3> */
+h3 em {
+    /* Règle CSS */
+}
+</code>
+**A + B : une balise qui en suit une autre**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à la première balise p (paragraphe) qui suit une balise h3 (titre) */
+h3 + p {
+    /* Règle CSS */
+}
+</code>
+**A[attribut] : une balise possédant un attribut**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises a (lien) possédant l'attribut title */
+a[title]{
+    /* Règle CSS */
+}
+</code>
+**A[attribut="valeur"] : une balise possédant un attribut et une valeur exacte**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises a (lien) dont l'attribut title est égal au texte : Cliquez ici */
+a[title="Cliquez ici"]{
+    /* Règle CSS */
+}
+</code>
+**A[attribut*="valeur"] : une balise, un attribut et une valeur**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises a (lien) dont l'attribut title contient le texte : ici */
+a[title*="Clic ici"]
+{
+    /* Règle CSS */
+}
+</code>
+==== Pour aller plus loin ... ====
+<html><a href="https://fr.learnlayout.com/" target="_blank">Apprendre les mises en page CSS</a></html>