Les Selecteurs

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Les Selecteurs

Temps d'étude : 30 min.

Niveau : Facile.

Tags : Les Selecteurs

Fichier(s) utile(s) pour ce cours : /

Les différents selecteurs

Les selecteurs en CSS permettent « d'attraper » des éléments déclarés dans le fichier Html.

Nous pouvons en lister 3 principaux :

Les selecteurs de balises
Les selecteurs de classe
Les selecteurs d'id

Les sélecteur de balises

Cela permet de mettre en forme une partie de votre page web en appelant directement la balise concernée.

Exemple Html :

		
			Div permet de créer un emplacement dans un site web.

Div permet de créer un emplacement dans un site web.
On utilise le mot div pour "division". Un site n'est qu'une série de zones divisées.

Exemple Css (avec selecteur de balise) :

		div{
		color: green;
		}

Le Résultat

Div permet de créer un emplacement dans un site web.

En selectionnant la balise div (et en appliquant la propriété color), le texte à l'intérieur de la div (zone) sera écrit en couleur verte.

Ce code CSS permet de dire « va me chercher la ou les div dans le fichier html et écrit le texte à l'intérieur en couleur verte ».

Pour cela il y a 2 conditions :
fléche

il faut naturellement que la balise div existe dans le fichier html
fléche

il faut impérativement que les deux fichiers (html et css) soit reliés entre eux, grâce à la balise link.

Autre exemple, imaginons que nous ayons plusieurs zones (ce qui est le cas dans tous les sites web).

Observons le fichier Html :

		<div>
			Zone n°1
		</div>
		<div>
			Zone n°2
		</div>

Et le fichier Css :

		div{
		color: green;
		}

Le Résultat

Zone n°1

Zone n°2

Voyez-vous la problématique ? Lorsque nous selectionnons "div{}" dans le fichier CSS, les deux div sont attrapées et sont mises en forme (couleur verte).
Cependant il arrive régulièrement que nous souhaitons appliquer du style à une zone en particulier de manière localisée.
Pour plus de personnalisation, nous allons donc nous servir des selecteurs de classes.

Selecteur de classe

Exemple avec le fichier Html :

		<div class="mazoneperso">
			Zone n°1
		</div>
		<div>
			Zone n°2
		</div>

Dans ce fichier Html, une des deux zones (div) possède un nom permettant de la représenter.

Et le fichier Css :

		.mazoneperso{
		color: green;
		}

Dans ce fichier CSS, je ne selectionne pas toutes les zones (div) mais seulement celles qui possèdent le nom "mazoneperso".

Pour selectionner une classe, j'utilise un point ".mazoneperso{}".

Le Résultat

Zone n°1

Zone n°2

De cette manière, je suis certain de cibler la bonne zone pour appliquer la mise en forme.

Selecteur d'id

Dans le principe, un id est très similaire à une classe puisque l'objectif est de donner un nom à une zone pour mieux l'identifier.

Exemple avec un fichier Html :

		<div id="zoneprincipale">
			Zone n°1
		</div>
		<div>
			Zone n°2
		</div>

Dans ce fichier Html, la première des deux zones (div) possède un nom permettant de l'identifier.

Et voici le fichier Css qui l'accompagne :

		#zoneprincipale{
		color: green;
		}

Le Résultat

Zone n°1

Zone n°2

Avouez que ce n'est pas compliqué, l'objectif d'un ID est donc le même que celui d'une CLASS.

Techniquement, je selectionnerais une CLASS avec un point . et un ID avec le symbole dieze #

Quelle est la différence entre une CLASS et un ID ?
Le W3C dit que nous pouvons utiliser une même classe plusieurs fois et que nous devons utiliser qu'une seule fois le même id dans un fichier Html.

Dans les faits, nous pouvons utiliser plusieurs fois le même id et plusieurs fois la même classe, cela fonctionne très bien.
Pour ne pas froisser le W3C :D et avoir une chance de valider notre code, nous suivrons leur recommandation (un id sera utilisé qu'une seule fois).

Voici un code d'exemple valide W3C :

		<!Doctype html>
		<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Titre</title>
		</head>
		<body>
			<div class="test"></div>
			<div class="test"></div> <!-- je peux ré-utiliser la classe test une deuxième fois -->
			<div id="test2"></div>
		</body>
		</html>

Par conséquent, Les Intégrateurs / Développeur Front de métier utilise les ID pour identifier les zones principales d'un site web et les classes pour tout le reste.

Nous utilisons plus souvent des classes dans un code-source.

Selecteur d'éléments

Exemple avec un fichier Html :

		<p> Texte n°1 </p>
		<p> Texte n°2 </p>
		<p> Texte n°3 </p>

Et, le fichier Css :

	p{ color: red; }
	p:first-child { color: green; }
	p:last-child { color: blue; }

Le Résultat

Texte n°1

Texte n°2

Texte n°3

p permet de cibler tous les éléments p
first-child permet de cibler le premier élément p
last-child permet de cibler le dernier élément p

Les régles d'écriture

Il arrive parfois qu'une même classe CSS puisse être utilisée et appelée à plusieurs endroits de votre fichier Html, exemple :

		<div class="mazoneperso">
			Zone n°1
		</div>
		<div>
			Zone n°2
		</div>
		<span class="mazoneperso">
			Zone n°3
		</span>

Dans ce cas, nous adapterons le fichier CSS, exemple :

		div.mazoneperso{
		color: green;
		}

Cela veut dire « va me chercher la div qui possède la classe mazoneperso », ce qui éliminera le span (puisque ce n'est pas une div !).

Le Résultat

Zone n°1

Zone n°2

Zone n°3

Les hierarchies

Il est également possible de préciser la hierarchie qui vous emmène jusqu'à un élément en particulier.

Exemple Html :

		<section>
			<article>Article 1</article>
			<p>Texte 1</p>
			<div>Zone 1</div>
		</section>
		<div>
			Zone n°2
		</div>
		<div>
			Zone n°3
		</div>

Exemple Css :

		section  div{
		color: red;
		}

Le Résultat

Article 1

Texte 1

Zone 1

Zone n°2

Zone n°3

Dans le fichier CSS, l'espace entre les deux balises permet de dire « va me chercher la div qui se trouve à l'intérieur de la section », ce qui touchera la zone 1 et éliminera les zones 2 et 3 qui sont en dehors de la section.

Grouper les styles

Il est également possible de regrouper des styles de mises en forme, exemple Html :

		<header>
			Haut de site
		</header>
		<section>
			Milieu de site
		</section>
		<footer>
			Bas de site
		</footer>

Exemple Css :

		header, footer{
			color : purple;
		}

Le Résultat

Haut de site

Milieu de site

Bas de site

Dans le fichier CSS, la virgule entre les deux balises permet de dire « applique ce style sur la balise header ET footer », ce qui touchera le contenu des deux zones (header et footer) et éliminera la zone section.

Dissocier les styles

Il est tout à fait possible de donner un style global pour une zone et un style spécifique pour une partie de texte.

Exemple Html :

		<div class="mazone">Voici le <span class="montexte">texte</span> de ma Zone</div>

Exemple Css :

		.mazone{
			color : red;
		}
		.montexte{
			color : blue;
		}

Le Résultat

Voici le texte de ma Zone

Bon à savoir
Une classe CSS peut contenir un chiffre, par exemple : maclasse2
Une classe CSS ne peut pas commencer par un chiffre, exemple : ~~2maclasse~~

Une classe CSS est sensible à la casse, ainsi ce code ne fonctionnera pas :
Exemple Html :

		<div class="Maclasse">Voici une zone avec Maclasse</div>

Exemple Css :

		.maclasse{
			color : red;
		}

Le Résultat

Voici une zone avec Maclasse

En effet, la classe a été nommée avec un M majuscule au niveau du code Html et en minuscule du côté CSS.

Dans le nom d'une classe CSS, nous pouvons mettre des lettres minuscules ou majuscules de l'alphabet sans accent.

Une classe peut aussi contenir tous les chiffres de 0 à 9 et les caractères (underscore) "_" et (tiret) "-".

Dans tous les cas, il faut rester cohérent entre le nom que vous donnerez côté Html et celui que vous utiliserez côté CSS.

Liste de selecteurs CSS

Liste des selecteurs CSS :

Selecteurs Généraux
Selecteur	Exemple CSS	Exemple HTML	Description
balise	div{}	<div> mazone1 </div> <div> mazone2 </div>	Selectionne toutes les balises <div>
.class	.mazone{}	<div class="mazone"> mazone1 </div> <div> mazone2 </div>	Selectionne tous les élements possédant la class="mazone".
#id	#zoneprincipale{}	<div id="zoneprincipale"> mazoneprincipale1 </div> <div> mazone2 </div>	Selectionne l'élément possédant l'id="zoneprincipale"
*	*{}	<header> haut de site </header> <div> zone </div>	Selectionne tous les éléments de la page
balise balise balise > balise	div p{} div > p{}	<div> <p> mon texte </p> </div>	L'espace permet de selectionner toutes les balises <p> à l'intérieur des balises <div> Ce chevron permet de selectionner toutes les balises p ayant comme parent la balise div.
balise, balise	div, p{}	<div> mazone </div> <p> mon texte </p>	La virgule permet de selectionner toutes les balises <div> et toutes les balises <p>
balise + balise	div + p{}	<div> mazone </div> <p> mon texte </p>	Le + permet de selectionner toutes les balises <p> placées immédiatement après une balise <div> (sans autres éléments entre les deux)
balise ~ balise	div ~ p{}	<div> mazone </div> <p> mon texte </p>	Selectionne les balises <p> précédées par une balise <div>
balise.class	span.mazone{}	<span class="mazone"> mazone1 </span>	Selectionne tous les élements span possédant la class="mazone".

Selecteurs d'attributs
Selecteur	Exemple CSS	Exemple HTML	Description
[attribut]	[title]{}	<a href="" title="le titre"> Le lien </a>	Selectionne tous les éléments ayant l'attribut title
[attribut=valeur]	[type="text"]{}	<input type="text" name="monchamp">	Selectionne tous les éléments ayant l'attribut type="text"
[attribut$=valeur]	img[src$=".png"]{}	<img src="image.png">	Selectionne toutes les balises <a> ayant la terminaison ".png"
[attribut^=valeur]	a[href^="http"]{}	<a href="http://www.google.com">google</a>	Selectionne toutes les balises <a> commençant par "http"
[attribut~=valeur]	[title~=Paris]{}	<img src="Tour Eiffel de Paris 75">	Selectionne tous les éléments ayant dans leur titre "Paris". (Attention, à vérifier).

Selecteurs Complémentaires - pseudo éléments
Selecteur	Exemple CSS	Exemple HTML	Description
:hover	a:hover{}	<a href="">Mon Lien</a>	Selectionne les liens lors du survol pour leur appliquer un style spécifique
:active	a:active{}	<a href="">Mon Lien</a>	Selectionne les liens actifs
:link	a:link{}	<a href="">Mon Lien</a>	Selectionne tous les liens qui n'ont pas été visités
:visited	a:visited{}	<a href="">Mon Lien</a>	Permet d'appliquer une mise en forme sur les liens ayant déjà été visités.
:not(selecteur)	div:not(.mazone2){}	<div class="mazone1">Ma zone perso 1</div> <div class="mazone2">Ma zone perso 2 </div> <div class="mazone3">Ma zone perso 3 </div>	Selectionne toutes les zones div autres que la zone div.mazone2{}
:first-child	p:first-child{}	<p>Mon premier paragraphe</p> <p>Mon second paragraphe</p>	Selectionne la première balise <p> du corps de la page (body) ou les premieres balises p à l'intérieur d'une autre balise parent
:last-child	p:last-child{}	<p>Mon paragraphe</p> <p>Mon dernier paragraphe</p>	Selectionne la dernière balise <p> du corps de la page (body) ou les dernières balises p à l'intérieur d'une autre balise parent
:nth-child(n)	p:nth-child(2){}	<p>Texte n°1</p> <p>Texte n°2</p>	Selectionne toutes les balises <p> étant positionnées en 2e élément dans son parent ou dans le corps de page général (body)
:first-letter	p:first-letter{}	<p>Ce texte comporte une première lettre</p>	Selectionne la 1ère lettre du texte contenue dans tous les éléments <p>
:first-line	p:first-line{}	<p>Ce texte comporte plusieurs lignes</p>	Selectionne chaque 1ère ligne de chaque balise <p>
:after	h1:after{}	<h1>Mon Titre</h1>	Permet d'insérer du contenu après un élément <p>
:before	h1:before{}	<h1>Mon Titre</h1>	Permet d'insérer du contenu avant un élément <p>
::selection	::selection{}	-	permet de mettre en forme la partie du site selectionné et mis en surbrillance par l'internaute (comme lors d'un copier/coller)
:target	#zone1:target{}	<a href="#zone1">Mon Lien</a>	Permet d'appliquer un style sur l'élément actif présent dans l'url (#zone1) suite à un clic de l'internaute
:required	input:required{}	<input type="text" required="required">	Permet de mettre en forme sur les balises input ayant l'attribut "required".

Allez au chapitre suivant : 6. Firebug