Les principaux sélecteurs CSS

Les principaux sélecteurs CSS

N'importe quel développeur WEB utilise régulièrement les sélecteurs CSS. Notamment pour leur définir un style particulier dans une feuille de style CSS. Mais on les utilise aussi régulièrement en Javascript.

Qu'est ce que le DOM ?

Le Document Object Model est une structure de document XML et HTML. Il correspond donc à tous les éléments présent dans notre code HTML. Par exemple l'élément de notre page HTML est un élément faisant partie du DOM. Pour une définition du DOM plus détaillée et plus complète suivez ce lien.

Les sélecteurs CSS 2

Les sélecteurs CSS standard sont définis par le W3C. Vous pouvez avoir un historique assez complet de l'historique des versions de CSS.

Pour savoir comment tester les différents sélecteurs vous devrez créer une page HTML et par exemple créer une feuille de style. Si vous avez besoin d'aide vous pouvez allez voir le site Openclassroom qui est parfait pour débuter.

Sélectionner une balise selon son nom

Le sélecteur est très simple il correspond exactement au nom de la balise.

span validera les éléments comme le suivant :

Un texte ici

Ainsi, le code suivant colorera tout le texte de toutes les balises span en rouge :

span { color:red; }

Sélectionner une balise selon le nom de sa classe

Pour sélectionner une ou plusieurs balises selon le nom de sa classe il faut utiliser le sélecteur suivant :
.nom_de_ma_classe
Ainsi le sélecteur .required sélectionnera tous les éléments avec class="required". Comme par exemple :

Sélectionner des balises selon leur identifiant (id)

Il est possible de définir un identifiant pour les balises désirées en leur définissant un attribut id. Comme avec le code suivant qui définit une div footer (notons qu'il existe un élément footer en HTML5).
Pour respecter les bonnes pratiques en matière de DOM il ne faut pas définir un identifiant pour plusieurs éléments. En effet, si sur votre page plusieurs éléments possède l'identifiant footer vous aurez des problèmes lorsque vous manipulerez votre DOM.
Pour sélectionner notre footer précédent nous pouvons utiliser le sélecteur #footer

Combiner les sélecteurs

On peut aussi combiner les sélecteurs en les définissant les uns à la suite des autres (sans ajouter d'espace) et en mettant toujours (s'il existe) le sélecteur de nom de balise en premier.
De cette manière le sélecteur span.required sélectionnera tous les :
Mais ne sélectionnera pas les 

La suite dans un prochain article...