Sélecteur CSS de base

Format d'une feuille de style

Le code CSS est basé sur la programmation de feuille de style. Une feuille de style a le format suivant:

Les propriétés et leurs valeurs seront l'intérêt principal de ce cours pendant plusieurs semaines. Ce sont les règles qui définissent le style d'un élément. Par exemple, vous pouvez spécifier la couleur du texte d'un élément avec la propriété color et lui donner une valeur comme red. Cela donne la règle color: red. Toutefois, dans cette section, nous ne verront pas comment styler un élément, mais plutôt comment identifier quel élément nous voulons styler. Nous mettrons donc l'emphase sur les sélecteurs CSS.

En CSS, pour sélectionner un certain élément et lui appliquer un style, nous utilisons les sélecteurs CSS. Les sélecteurs CSS sont le texte écrit avant les accolades { ... } dans une feuille de style. Il existe de nombreux sélecteurs et de nombreuses règles pour les faire fonctionner ensemble. Dans cette section, nous verrons comment utiliser les sélecteurs CSS de base.

Sélecteur par nom de balise

Si vous désirez appliquer le même style à toutes les balises d'un certain type, c'est le sélecteur que vous utiliserez. Un sélecteur par nom de balise s'utilise simplement en indiquant le nom de la balise que nous voulons affecter.

Sélecteurs par ID

Si vous désirer appliquer un style sur un élément très spécifique de votre page Web et que vous ne désirez pas réutiliser ce style pour d'autres éléments, vous voulez plutôt utiliser le sélecteur par ID. Ce sélecteur permet de sélectionner un élément de votre page HTML ayant un attribut ID spécifique.

Du côté du CSS, pour utiliser le sélecteur par ID, il suffit simplement de mettre le symbole # devant le nom du l'ID que vous voulez viser.

Sélecteurs par classe

Si vous désirez créer un style réutilisable que vous pourrez mettre sur plusieurs éléments, le sélecteur par classe sera votre ami. La réutilisation étant un des concepts de programmation les plus important, c'est probablement le sélecteur que vous utiliserez le plus souvent. Ce sélecteur fonctionne si nous donnons une "classe" à des éléments HTML. Pour ce faire, nous utiliserons l'attribut class qui peut être mis sur n'importe quelle balise HTML.

Du côté du CSS, pour sélectionner tous les éléments possèdant une classe, nous pouvons simplement utiliser le point . suivi du nom de la classe.

Comme vous pouvez le constater, puisque nous pouvons mettre la même classe sur plusieurs élément, cela rend le style réutilisable. Il est aussi possible de mettre plusieurs classe à un élément HTML simplement en les séparant par des espaces, ce qui nous permet beaucoup de flexibilités.

Combinaison de sélecteurs

Il est possible d'être très précis dans nos sélecteurs. Par exemple, si nous voulons sélectionner tous les paragraphes ayant la classe "en-retrait", nous pouvons utiliser la combinaison de sélecteurs suivante:

Il est aussi possible de faire ce genre de combinaison avec les ID de la façon suivante:

Imbrication de sélecteurs

Il est possible de spécifier des sélecteurs à l'intérieur d'un autre sélecteur simplement en mettant un espace entre les sélecteurs de la façon suivante:

Dans cet exemple, nous sélectionnons tous les <li> ayant la classe important et se retrouvant dans un <ul> qui se retrouve dans un élément ayant le id principal.

Il est important de noter que ce type de sélecteur capte les éléments même s'il ne sont pas des enfants direct du sélecteur précédant. Voici un exemple:

Dans l'exemple ci-dessus, puisque nous sélectionnons tous les <a> à l'intérieur des <header>, les 2 <a> seront visé. En effet, même si le deuxième <a> n'est pas directement à l'intérieur du <header>, il est quand même à l'intérieur de celui-ci.

Multiples sélecteurs

Si vous désirez appliquer les mêmes règles CSS à plusieurs éléments, il est possible de le faire en utilisant la virgule ,.

Dans l'exemple ci-dessus, les règles contenu entre les accolades sont donc appliqué aux balises <footer>, aux balises <p> ayant la classe important et aux <a> ayant la classe en‑gras qui se retrouve dans des <li> à l'intérieur d'un <ul>.