Les sélecteurs CSS

L'association HTML / CSS se fait grâce aux sélecteurs.

L'association par balise

Je peux donner un style à toutes les balises HTML. La syntaxe est la suivante:

	<style>
	span
	{
	color:red;
	}
	</style>

Désormais toutes les balises <span> de la page auront un texte rouge.

Résultat:

Yes!

L'association par id

Pour donner un identifiant unique à un élément, je lui donne comme attribut un "id".

<div id="xxx">BONJOUR</div>

Je peux maintenant contrôler l'élément "à distance". Exemple:

	<style>
	#xxx
	{
	color:red;
	background-color:blue;
	font-weight:bold;
	width:100px;
	}
	</style>

Résultat:

BONJOUR

On remarque que pour une association unique, CSS utilise le caractère #. La syntaxe CSS est différente de HTML, les données associées à l'identifiant sont encadrées par des accolades {}.

Dans ces accolades on peut y implémenter des propriétés. Dans cet exemple on peut voir "color", "background-color", "font-weight" et "width". Et pour chaque propriété j'ai donné une valeur. Ainsi pour la propriété "color", j'ai défini que la couleur est "red" donc rouge. La propriété "color" change la couleur du texte.

Les associations par class

La logique des class est la même que l'id, la différence étant que l'id est unique, ce qui n'est pas le cas de la class.

Exemple:

	<span class="menu">XXX</span>
	<div class="menu">YYY</div>

	<style>
	.menu
	{
	background-color:violet;
	}
	</style>

Il est possible d'associer plusieurs class sur un même élément en les séparant d'un espace:

Combinaison d'association

Il est possible de combiner les associations entre elles. Ainsi si je veux transformer le texte des balises <a> du <footer> en leur donnant une couleur bleu, je peux le faire en une ligne comme ceci:

Eléments imbriqués

	<style>
	footer a
	{
	color:blue;
	}
	</style>

On remarque un espace entre la balise footer et a. Les liens de votre <footer> seront désormais bleu.

Groupe d'éléments

	<style>
	a,b,span,footer
	{
	font-weight:bold;
	}
	</style>

Les balises <a>, <b>,<span> et <footer> auront désormais le texte en gras.

Sélecteur père-fils direct de premier dégré

	<style>
	body > a
	{
	font-weight:bold;
	}
	</style>

Ce code permet de donner un texte gras aux liens qui sont directement dans le <body> ; les liens imbriqués dans d'autres éléments ne seront pas concernés.

Sélecteur consécutif

	<style>
	td + td
	{
	background-color:orange;
	}
	</style>

Résultat:

0	1	2	3
0	1	2	3

Selecteur avec attribut

On peut chercher les éléments qui ont un attribut renseigné :

	<style>
	input[disabled]
	{
	color:orange;
	}
	</style>

	<input disabled type="text" value="0" />
	<input type="text" value="1" />

Résultat:

Dans cet exemple on peut voir que l'input qui a été mis en "disabled" a pris la couleur orange.

Selecteur avec valeur d'attribut

On peut chercher les éléments qui ont une valeur d'attribut renseignée :

	<style>
	input[value="123"]
	{
	background-color:orange;
	}
	</style>

	<input type="text" value="123" />
	<input type="text" value="456" />
	<input type="text" value="789" />

Résultat:

Sélecteur avec une recherche avancée

On peut faire un sélection d'éléments via la recherche "éléments dont la valeur de tel attribut contient telle valeur".

Exemple:

	<style>
	input[value~="olivier"]
	{
	color:green;
	font-style:italic;
	border-color:red;
	}
	</style>

	<input type="text" value="olivier engel" />
	<input type="text" value="engel olivier" />
	<input type="text" value="olivierengel" />
	<input type="text" value="batman" />