« Le langage CSS/Les sélecteurs » : différence entre les versions

N'importe quel élément HTML de la page peut utiliser cette classe :

 

<p class="nom_de_classe">...</p>

<ul class="nom_de_classe">

<li>...</li>

</ul>

 

Ce qui n'empêche pas par la suite de définir des règles communes à tous ces éléments et d'autres spécifiques à certains d'entre eux :

Ce sélecteur désigne tous les éléments ''h1'' petits-enfants d'éléments d'identifiant ''wikipedia'', ou situés plus loin dans la hiérarchie du document (par exemple <code>#wikipedia > #contenu > .introduction > h1</code>). Ainsi dans le code HTML suivant :

 

<div id="wikipedia">

<h1> Nom du site </h1>

</div>

</div>

 

les deux titres ''h1'' seraient affectés par la première règle mais seul le deuxième titre de texte « Titre 1 » serait affecté par la seconde.

applique un style à l'élément ''h2'' qui suivrait immédiatement un élément ''h1''. Ainsi dans le code HTML suivant :

 

<div class="wikipedia">

<h1> Titre 1 </h1>

<p>Paragraphe...</p>

</div>

 

seul le titre de texte « Titre 1.1 » serait affecté par les règles de style.

Prenons l'exemple d'un menu constitué de plusieurs listes de liens. On peut coder un tel menu en HTML de cette façon :

 

<!-- exemple surchargé en classes -->

<h1 class="menu"> Navigation </h1>

...

</ul>

 

Noter qu'on aurait aussi pu utiliser un nom de classe différent par élément différent (par ex. ''menu_title'' pour les titres ''h1''). En fait il n'est pas nécessaire d'ajouter une classe à chaque élément fonctionnel du menu (le titre, la liste, l'entrée, le lien) sous prétexte que ce sont des éléments HTML différents. Ainsi il suffit de placer le menu dans un élément parent de type ''div'' et d'identifiant ''menu'' :

 

<!-- solution habituellement rencontrée -->

<div id="menu">

</ul>

</div>

 

D'un point de vue de la structure de la page web, il est en plus tout-à-fait logique de placer le menu dans un élément conteneur pour le séparer du reste de la page. Ceci facilite son placement par la suite. On peut alors accéder à chaque élément fonctionnel en CSS de cette manière :

Prenons comme exemple la table des matières (TDM) regroupant les titres de la page web. L'adaptation classique en HTML est la suivante :

 

<!-- table des matières -->

<div id="tdm">

</ol>

</div>

 

Ici les liens pointant vers les titres des sections sont placés dans des listes de liens imbriquées. Maintenant nous souhaiterions que cette table des matières soit placée soit dans un cadre flottant à droite ou à gauche du texte, soit à gauche en occupant toute la largeur de la page (positionnement par défaut), selon l'humeur de l'administrateur (ou un paramètre utilisateur ?). Le plus simple est d'ajouter simplement des classes ''float'' et ''left'' ou ''right'' à l'élément conteneur dans les deux premiers cas, par exemple :

== Imbrication ==

L'esperluette est l'opérateur d'imbrication :

.classe1 {

&.classe2 { ... }

}

 

Autre exemple :

.classe1 {

&--myDataAttribute { ... }

}