« 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">

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 <tt>#wikipedia > #contenu > .introduction > h1</tt>). Ainsi dans le code HTML suivant :

 

<div id="wikipedia">

<h1> Nom du site </h1>

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>

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>

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">

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">