DEVENIR-WEBMASTER.COM Log In
 20
Faire le quizz close

Apprendre à utiliser les Sélecteurs en CSS

Visiter ma chaine Youtube

# Les règles de nommage des identificateurs et des classes close

Lorsqu'un sélecteur est fait à partir du nom d'un identificateur ou du nom d'une classe, c'est le programmeur qui choisit ce nom. Pour cela il doit respecter un certain nombre de règles.

On appelle identifiant le nom d'un identificateur ou le nom d'une classe. En CSS les identifiants ne peuvent contenir que des lettres (minuscules ou majuscules) ou des chiffres [a-zA-Z0-9] avec en plus le trait d'union et le tiret bas (underscore).

Il y a des contraintes spécifiques pour la première lettre voire les deux selon les cas. Les identifiants ne peuvent pas commencer par un chiffre, deux underscore ou un underscore suivi d'un chiffre ou un trait d'union suivi d'un chiffre.

Le plus simple est de systématiquement commencer par une lettre et vous n'aurez pas de problème.

Souvenez vous également que le CSS est sensible à la case pour les noms des identifiants. La classe para ne sera pas identique à la classe PARA.

Par contre le CSS n'est pas case sensitive pour les noms des balises HTML, les noms et les valeurs des propriétés CSS.

# Les sélecteurs de base close

Sélecteur universel.

Sélecteur universel Demo ici

Sélecteur d' identificateur.

Sélecteur d'identificateur Demo ici

Sélecteur de classe.

Sélecteur de classe Demo ici

Sélecteur de type.

Sélecteur de type Demo ici

Il est possible de coupler le sélecteur de type avec le nom d'un identifiant ou d'une classe. Cette façon d'écrire améliore la lisibilité de la feuille de style.

Sélecteur de type associé à une classe ou à un id

Sélecteur multiple.

Sélecteur multiple Demo ici

Sélecteur d'attribut.

Dans l'exemple suivant j'ai positionné des images avec différentes valeurs pour l'attribut title. J'ai pris title et pas alt pour avoir un effet de survol au passage du curseur.

On va tester tous les cas de figures pour la recherche du mot clé 'Paris' dans cet attribut title.

Sélection d'un élément selon l'attribut

Sélectionner les éléments dans lesquels un attribut existe quelle que soit sa valeur.

Sélection d'un attribut quel que soit sa valeur Demo ici

Sélectionner les éléments dans lesquels un attribut a exactement une valeur.

Sélection d'un attribut avec une valeur exacte Demo ici

Sélectionner les éléments dans lesquels un attribut contient une occurrence d'une valeur précise.

Sélection d'un attribut avec une valeur precise Demo ici

Sélectionner les éléments dans lesquels un attribut a une valeur qui commence par une valeur précise.

Sélection d'un attribut qui commence par une valeur Demo ici

Sélectionner les éléments dans lesquels un attribut a une valeur qui se termine par une valeur précise.

Sélection d'un attribut qui se termine par une valeur Demo ici

# Les combinateurs close

Les combinateurs vous aident à vous positionner sur l'arborescence du document en utilisant les relations ancêtre et descendant, parent et enfant, frère.

Combinateur de descendants.

Ici on se sert de la relation ancêtre et descendant. Les boutons sont stylés en une seule fois avec la classe .push_button. Ensuite il est possible de les cibler individuellement en précisant leur ancêtre. Vous pouvez si c'est nécessaire mettre plus de deux niveaux c'est à dire un ancêtre suivi d'un parent suivi d'un enfant...

Combinateur de descendants Demo ici

Combinateur d'enfants directs.

Ici c'est la relation parent et enfant qui est ciblée. Les paragraphes petits-enfants du body ne seront pas sélectionnés.

Combinateur enfants directs Demo ici

Combinateur du frère adjacent.

Ici on sélectionne un seul frère, le frère adjacent c'est à dire un frère immédiatement positionné après un élément donné.

Combinateur frère adjacent Demo ici

Combinateur des frères adjacents.

Vous pouvez sélectionner tous les frères adjacents. Ici les deux paragraphes qui sont après l'élément article.

Combinateur des frères adjacents Demo ici

# Les pseudo-classes close

Les pseudo-classes sélectionnent un élément dans un état particulier. La liste est longue, vous avez ici ceux que j'utilise le plus.

Pseudo-classes de liens

Ici on sélectionne les liens qui sont dans un état particulier.

Pseudo classe pour styler les liens Demo ici

Il existe aussi la pseudo-classe :focus pour la navigation au clavier par la touche tab

L'ordre selon lequel les pseudo-classes doivent être traitées est important. Il y a un moyen mnémotechnique pour s'en souvenir le fameux LoVe Fuck HAte qui rappelle cet ordre : Link, Visited, Focus, Hover, Active.

Pseudo-classes d'input

Vous pouvez sélectionner l'état des éléments input selon qu'ils sont checked, enabled, disabled.

Pseudo classe pour récupérer des input dans un état donné Demo ici

Pseudo-classes nième enfant

Vous pouvez sélectionner le nième enfant d'un conteneur en utilisant nth-child(n) où n est le rang de l'élément (en commençant à 1).

Pseudo classe pour récupérer le n ième enfant Demo ici

Vous pouvez sélectionner les rangs pairs(even) et les rangs impairs(odd). Dans le chapitre sur les tableaux on a beaucoup utilisé ça.

Pseudo classe pour récupérer les enfants de rang pair ou impair Demo ici

# Les pseudos-éléments close

Les pseudo-éléments vont sélectionner des morceaux de contenu. Il faut mettre un double :: devant un pseudo-élément.

Le pseudo-élément ::first-letter

Le pseudo-élément ::first-letter sélectionne la première lettre.

Pseudo élément pour sélectionner la première lettre Demo ici

Le pseudo-élément ::first-line

Le pseudo-élément ::first-line sélectionne la première ligne. Ici c'est dynamique, on voit bien que si on change la taille de la fenêtre et bien on va changer la première ligne. On ne pourrait pas mettre un span car on ne saurait pas où le mettre.

Pseudo élément pour sélectionner la première ligne Demo ici

Les pseudo-éléments ::before et ::after

A l'aide de la propriété content vous pouvez ajouter du contenu avant ou après un élément. A noter que les contenus insérés seront enfants du contenu initial.

Pseudo élément pour insérer du contenu Demo ici