Source : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1
Une des dernières notions "de base" que je souhaite vous enseigner sur le CSS est qu'on a la possibilité d'indiquer l'ordre d'imbrication des balises dans le CSS.
On pourrait penser que c'est encore un truc tordu inventé par des informaticiens portant des grosses lunettes... mais que nenni !
C'est en fait simple à comprendre, et surtout utile.
Nous sommes dans notre fichier CSS. Nous souhaiterions définir un style uniquement pour les balises <em> qui se trouvent à l'intérieur d'un titre <h3>.On doit écrire ceci :
Code : CSS
h3 em /* => tous les em situés à l'intérieur d'un h3 */
{
color: blue;
}
Comme vous le voyez, on a juste séparé les 2 noms de balises par un espace, et non pas par une virgule comme on l'a fait plus haut.
Cela signifie "Je veux modifier le style de toutes les balises <em> situées à l'intérieur de titres <h3>". On a indiqué dans le CSS dans quel ordre devaient être imbriquées les balises.
L'ordre est très important ! Si vous aviez mis "em h3" cela aurait voulu dire "Tous les <h3> situés à l'intérieur de balises <em>".Cela est d'ailleurs impossible à faire car on ne peut pas mettre une balise de type block dans une balise de type inline.
Voici un fichier XHTML pour que vous compreniez bien comment ça fonctionne :
Code : HTML
<h3>L'imbrication, c'est <em>pratique</em></h3>
<p>Cet exemple vous montre comment fonctionne l'imbrication.<br />Le mot "pratique" dans le titre sera écrit en bleu, mais pas celui-ci : <em>pratique</em>.</p>
Pratique, n'est-ce pas ?
Vous pouvez aussi mélanger des balises et des class :
p .important
Ce qui signifie : "Toutes les class "important" contenues dans des balises <p>".
Un petit exemple tordu pour terminer en beauté :
blockquote p strong, h1 .important
Alors là, attention de ne pas tout mélanger. La virgule "coupe" la ligne en deux, elle signifie "ET". Pour bien voir que la ligne est coupée en deux, je vais colorer les deux parties :
blockquote p strong, h1 .important
Ce qui veut dire : "Toutes les balises <strong> contenues dans un <p> elles-mêmes contenues dans un <blockquote> ET toutes les class "important" contenues dans un titre <h1>"
Il existe des possibilités plus étendues en CSS pour l'imbrication, mais à notre stade non seulement ce n'est pas très utile et ça risque de vous embrouiller, mais
