Différence entre a.nomdelaclasse et a (espace) .nomdelaclasse [RÉSOLU]

Bonjour.

Je viens d'acheter aux puces le livre CSS, le guide complet et je n'arrive pas à comprendre la différence entre ces deux syntaxes: Voici l'extrait du livre:

<p class="chapeau">blablabla...</p>
<p>blablabla.... <a href="#" class="chapeau">blablabla...</a></p>

Nous avons appliqué la même classe à différents éléments HTML, à savoir un paragraphe et un lien. Nous voulon que le paragraphe et le lien aient une petite taille de caractères, et que les liens qui ont la classe chapeau soient en gras. Pour cela, définisson deux règles dans la feuille CSS:

.chapeau {font-size: small;}

a.chapeau {font-weight: bold;}

Pour préciser une classe en fonction de la balise HTML à laquelle elle est affectée, il suffit de préfixer le nom de l'élément au nom de la classe sans insérer d'espace. Si l'on ajoute un espace, les propriétés s'appliquent aux éléments qui possèdent la classe et qui sont contenus dans cette balise.

a .chapeau {font-weight: bold;}

Modifié par largowin (28 Jun 2009 - 17:03)

C'est simple, dans les sélecteurs CSS, l'espace est un opérateur qui place le scope sur les descendants. C'est l'équivalent de l'axe "::descendant" en xpath.

Donc :

a.class >> sélectionne les élements "a" de classe "class"
a .class >> sélectionne les élements de classe "class" descendants d'un élement a

Ok. Merci. C'est plus clair.