Informatique


Les sélecteurs

Aller à

Qu'est-ce qu'un style?

Pour appliquer un style à certaines balises d'une page web, il est nécessaire de pouvoir les différencier. Pour ce faire on utilise des sélecteurs, ceux-ci permettent de cibler les éléments d'une page.
Un style permettra donc de dire : "Je veux que tous les éléments de ce type aient ce style".
Un style se compose de deux parties :
  • un sélecteur qui précise sur quoi doit porter la règle
  • un ensemble de déclarations (couple propriété : valeur) placées entre accolades qui indiquent le style à appliquer
S'il y a plusieurs couples, ceux-ci sont séparés par des points-virgules.
Certaines propriétés peuvent avoir plusieurs valeurs, les différentes valeurs sont alors séparées par un espace.

Il faut de préférence utiliser les propriétés raccourcies afin d'éviter de rallonger inutilement la description des styles.


 Les sélecteurs

Il faut éviter de surcharger les sélecteurs, de les rendre trop compliqués, 3 étages est un maximum qu'il ne faudrait jamais dépasser.

Notation Nom Signification
Les sélecteurs de types (S.)
* S universel cible toutes les balises.
X S de types cible toutes les balises X.
X Y S descendant cible toutes les balises Y dont un ancêtre est une balise X.
X > Y S d'enfant cible toutes les balises Y enfant direct d'une balise X.
X + Y S adjacent cible toutes les balises Y dont le prédécesseur immédiat est une balise X; X et Y ont le même père.
X ~ Y S adjacent général cible toutes les balises Y dont le prédécesseur est une balise X; X et Y ont le même père.
.val S de classe cible toutes les balises ayant pour l'attribut class la valeur "val", une classe peut apparaître autant de fois que désiré.
#val S d'identificateur cible la balise ayant pour l'attribut id la valeur "val", un identifiant ne peut apparaître qu'une fois dans la page html.
Les sélecteurs d'attributs
[attr]   vrai si présence de l'attribut attr quelle que soit sa valeur.
[attr="val"]   vrai si présence de l'attribut attr de valeur "val".
[attr^="val"]   vrai si présence de l'attribut attr dont la valeur commence par la chaîne "val".
[attr$="val"]   vrai si présence de l'attribut attr dont la valeur finit par la chaîne "val".
[attr*="val"]   vrai si présence de l'attribut attr dont la valeur contient la sous-chaîne "val".
[attr|="val"]   vrai si présence de l'attribut attr dont la valeur débute par la chaîne "val" au sein de valeurs séparées par des traits-d'union.
[attr~="val"]   vrai si présence de l'attribut attr dont la valeur contient la chaîne "val" au sein de valeurs séparées par des espaces.
Les pseudo-classes, elles permettent de sélectionner des éléments en fonction de leur état.
a : link
a : visited
a : hover
a : active
les hyperliens cible les liens non visités, visités, survolés, cliqués.
X : hover
X : active
X : focus
les objets cible les objets survolés, activés (sur clic de la souris) ou prêts à recevoir des données (les formulaires).
Les pseudo-classes structurelle
X:first-child
X:last-child
 
 
vrai si l'élément sélectionné est le premier fils de son père
vrai si l'élément sélectionné est le dernier fils de son père.
X:nth-child(n)
X:nth-last-child(n)
  X qui est le n-ième enfant de son parent en comptant depuis le premier enfant
X qui est le n-ième enfant de son parent en comptant depuis le dernier enfant
Les pseudo-éléments, ils spécifient un état supplémentaire qu'il serait difficile de spécifier autrement
(ex: comment spécifier le 1er enfant d'un élément?)
X::first-line
X::first-letter
X::after
X::before
première ligne
première lettre
"après" l'élément
"avant" l'élément
cible la première ligne de l'objet X
cible la première lettre de l'objet X
pour insérer du contenu après l'élément
pour insérer du contenu avant l'élément
Les pseudo-classes pour les formulaires
:focus   cible l'élément de formulaire qui a le focus
:disabled
:enabled
  cible les élément actifs ou non de la page
:checked   spécifique aux cases à cocher, sélectionne les cases à cocher
:required
:optional
  cible les élément requis ou optionnels
:default (pour mémoire) cible les élément sélectionnés par défaut, par exemple dans une liste ou pour les cases à cocher
:valid
:invalid
(pour mémoire) cible les élément valides ou non valides
:inrange
:out-of-range
(pour mémoire) cible les élément dont la valeur est ou n'est pas comprise entre min et max
:read-only
:read-write
(pour mémoire) cible les élément en lecture seule, ou en lecture-écriture

Le sélecteur universel  

Toutes les balises sont concernées par le style.
Démo
	<style> 
	* {font-style:italic;} 
	</style> 
	</head> 
	<body> 
	<h1>Modigliani</h1> 
	<h2>le visage d'ange.</h2> 
	<p>Modigliani est décédé en 1919, lorsque son épouse Jeanne Hébuterne...</p> 

Le sélecteur de type  

  • on associe un style aux balises
  • si on veut associer le même style à 2 ou plusieurs balises on les sépare par des virgules
Démo
	<style> 
	body {background-color:#00ff00} 
	h1 {text-align:center;color:red} 
	h2,h3 {text-align:left;color:#000000}    /* même style pour h2 et h3 */ 
	p {font-style:italic;color:blue}  
	</style>  
	</head> 
	<body> 
	<h1>Modigliani</h1> 
	<h2>le visage d'ange.</h2> 
	<h3>l'ami de picasso.</h3> 
	<p>Modigliani est décédé en 1919, lorsque son épouse Jeanne Hébuterne...</p> 

Le sélecteur descendant  

Rappel: par défaut <em> met le texte en italique
  • le premier <em> est dans une balise <p> et subit donc le style
  • le deuxième <em> est dans une balise <div> et ne subit donc pas le style
Démo
	<style> 
	body {background-color:#00ff00} 
	h1 	{text-align:center;color:red} 
	p,div 	{color:blue}  
	p em {text-decoration:underline;color:red;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas</h1> 
	<h2>Le boss</h2> 
	<p>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<h1>Pherb</h1> 
	<h2>L'ingénieur</h2> 
	<div>A la base de toutes <em>les inventions</em>, frère de Phineas...</div> 

Le sélecteur d'enfant  

Côté style le signe > indique qu'on vise les enfants directes de la balise.
Démo
	<style> 
	body {background-color:#00ff00} 
	h1 	{text-align:center;color:red} 
	p 	{color:blue}  
	p > em {text-decoration:underline;color:red;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas</h1> 
	<h2>Le boss</h2> 
	<p>Le maître de <em>Perry</em>, frère de Pherb...., sacré <em>Perry</em>...</p> 
	<h1>Pherb</h1> 
	<h2>L'ingénieur</h2> 
	<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 

Le sélecteur adjacent  

  • dans l'exemple côté style le signe + indique qu'on vise le premier <p> précédé directement par un <h2>
  • le premier <p> a pour prédécesseur direct la balise <h2> et subit donc le style
  • le deuxième <p> a pour parent direct la balise <h1> et ne subit donc pas le style
Démo
	<style> 
	body {background-color:#00ff00} 
	h1 	{text-align:center;color:red} 
	p 	{color:blue}  
	h2 + p {text-decoration:underline;color:red;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas</h1> 
	<h2>Le boss</h2> 
	<p>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<p>Et patatra...</p> 
	<h1>Pherb</h1> 
	<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 

Le sélecteur adjacent général  

dans l'exemple côté style le signe ~ indique qu'on vise tous les <p> précédé directement par un <h2>
Démo
	<style> 
	body {background-color:#00ff00} 
	h1 	{text-align:center;color:red} 
	p 	{color:blue}  
	h2 ~ p {text-decoration:underline;color:red;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas</h1> 
	<h2>Le boss</h2> 
	<p>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<p>Et patatra...</p> 
	<h1>Pherb</h1> 
	<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 

Le sélecteur de classe  

  • l'attribut class appel le style décrit dans la fs
  • la classe est représentée par un "." dans la fs
  • une même classe peut être appelée par plusieures balises
Démo
	<style> 
	body {background-color:#00ff00} 
	p.descr {color:blue;}  
	p.perso {color:red;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas</h1> 
	<h2>Le boss</h2> 
	<p>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<p class=descr>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<p class=perso>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<h1>Pherb</h1> 
	<h2>L'ingénieur</h2> 
	<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 
	<p class=descr>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 
	<p class=perso>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 

le sélecteur d'identificateur  

  • l'attribut id appel le style décrit dans la fs
  • l'identificateur est représenté par "#" dans la fs
  • un même identificateur ne peut être utilisé qu'une seule fois, et donc par une et une seule balise.
Démo
	<style> 
	body {background-color:#00ff00} 
	#tete	{border:solid 2px rgba(100,100,100,1);width:600px;text-align:center;}
	p.descr {color:blue;}  
	p.perso {color:red;}  
	</style>  
	</head> 
	<body> 
	<h1 id="tete">Phineas et pherb</h1>
	<h1>Phineas</h1> 
	<h2>Le boss</h2> 
	<p>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<p class=descr>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<p class=perso>Le maître de <em>Perry</em>, frère de Pherb....</p> 
	<h1>Pherb</h1> 
	<h2>L'ingénieur</h2> 
	<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 
	<p class=descr>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 
	<p class=perso>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p> 

le sélecteur d'attribut X[attr]  

La balise qui porte l'attribut attr subit le style.
Démo
	<style> 
	body {background-color:#00ff00} 
	p[personnage] {color:blue;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<p personnage="famprinc">Le premier d'entre eux, Perry</p> 
	<p>Le maléfique Heinz Doofenschmirtz</p> 
	<p>Vanessa, la fille de Heinz Doofenschmirtz</p> 
	<p>Pour le reste, il s'agit du secteur des trois Etats...</p> 

Le sélecteur d'attribut X[attr="val"]  

La balise qui porte l'attribut attr dont la valeur est exactement val subit le style.
Démo
	<style> 
	body {background-color:#00ff00} 
	p[personnage="famprinc"] {color:blue;}  
	p[personnage="famdoof"] {color:red;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<p personnage="famprinc">Le premier d'entre eux, Perry</p> 
	<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p> 
	<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p> 
	<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p> 

Le sélecteur d'attribut X[attr^="val"]  

La balise qui porte l'attribut attr dont la valeur commence par val subit le style.
Démo
	<style> 
	body {background-color:#00ff00} 
	p[personnage^="fam"] {color:blue;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<p personnage="famprinc">Le premier d'entre eux, Perry</p> 
	<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p> 
	<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p> 
	<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p> 


Le sélecteur d'attribut X[attr$="val"]  

La balise qui porte l'attribut attr dont la valeur se termine par val subit le style.
Démo
	body {background-color:#00ff00} 
	p[personnage$="doof"] {color:blue;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<p personnage="famprinc">Le premier d'entre eux, Perry</p> 
	<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p> 
	<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p> 
	<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p> 

Le sélecteur d'attribut X[attr*="val"]  

La balise qui porte l'attribut attr dont la valeur contient val subit le style.
Démo
	<style> 
	body {background-color:#00ff00} 
	p[personnage*="am"] {color:blue;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<p personnage="famprinc">Le premier d'entre eux, Perry</p> 
	<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p> 
	<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p> 
	<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p> 

Le sélecteur d'attribut X[attr|="val"]  

La balise qui porte l'attribut attr dont la valeur commence par val au sein d'une valeur contenant des -.
Démo
	<style> 
	body {background-color:#00ff00} 
	p[personnage|="famprinc"] {color:blue;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<p personnage="famprinc-ext">Le premier d'entre eux, Perry</p> 
	<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p> 
	<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p> 
	<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p> 

Le sélecteur d'attribut X[attr~="val"]  

La balise qui porte l'attribut attr dont la valeur commence par val au sein d'une valeur contenant des espaces.
Démo
	<style> 
	body {background-color:#00ff00} 
	p[personnage~="famprinc"] {color:blue;}  
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<p personnage="famprinc ext">Le premier d'entre eux, Perry</p> 
	<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p> 
	<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p> 
	<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p> 

Les pseudo-classes des hyperliens  

!!! L'odre doit être absolument respecté: a:visited -> a:hover -> a:active -> a !!!

Démo
	<style> 
	body {background-color:#00ff00} 
	a:visited	{color:white;text-decoration:none;}  
	a:hover	{color:blue;text-decoration:underline;}  
	a:active	{color:black;text-decoration:none;}  /*au clic*/
	a	{font-size:2em;color:red;text-decoration:none;}  /*idem ps link*/
	</style>  
	</head> 
	<body> 
	<h1>Phineas et pherb</h1> 
	<a href="#">Phineas</a>

Les pseudo-classes des balises 

Démo
	<style> 
	div	{
		color:red;
		border:solid 2px green;
	}
	input[type="text"]:focus	{
		background-color:salmon;
	}
	div:hover	{color:blue;}  
	div:active	{color:black;}  
	</style>  
	</head> 
	<body> 
	Votre nom: <input type=text></input>
	<br><br>
	<div>Plus je connais les hommes, plus j’aime mon chien. Plus je connais les femmes, moins j’aime ma chienne.</div>

Les pseudo-classes premier enfant et dernier enfant 

Le sélecteur first-child correspond à chaque élément qui est le premier enfant de son parent.
Le sélecteur last-child correspond à chaque élément qui est le dernier enfant de son parent.
Démo
	<style> 
	p:first-child{
	color:red;
	}
	p:last-child{
	font-size:2em;
	}
	</style>  
	</head> 
	<body> 
	<p>Les femmes n’ont jamais eu envie de porter un fusil, pour moi c’est quand même un signe d’élégance morale.</p>
	<p>Une femme sans homme, c’est comme un poisson sans bicyclette.</p>
	<p>La culture, c’est comme l’amour. Il faut y aller par petits coups au début pour bien en jouir plus tard.</p>
	<p>Les imbéciles n’ont jamais de cancer. C’est scientifique.</p>
	<p>Desproges.</p>
	<div>
		<p>J’ai le plus profond respect pour le mépris que j’ai des hommes.</p>
		<p>Les animaux sont moins intolérants que nous : un cochon affamé mangera du musulman.</p>
		<p>Tous les animaux sont utiles à l’homme, parce qu’ils nous aiment, nous gardent et qu’on les bouffe.</p>
		<p>Desproges.</p>
	</div>

Les pseudo-classes structurelles 

Il faut avant toute chose repérer qui est le parent!!!
X:nth-child(n) est l'élément X qui est le n-ième enfant de son parent en comptant depuis le premier enfant
X:nth-child(2n) représente tous les éléments X pairs du parent en comptant depuis le premier enfant.
--
X:nth-child(2n+1) représente tous les éléments X impairs du parent en comptant depuis le premier enfant.
X:nth-last-child(n) est l'élément X qui est le n-ième enfant de son parent en comptant depuis le dernier enfant.
X:nth-last-child(2n) représente tous les éléments X pairs du parent en comptant depuis le dernier enfant.
X:nth-last-child(2n+1) représente tous les éléments X impairs du parent en comptant depuis le dernier enfant.
Démo
	<style> 
	p:nth-child(4){
	color:red;
	}
	p:nth-last-child(2){
	font-size:2em;
	}
	</style>  
	</head> 
	<body> 
	<p>Les femmes n’ont jamais eu envie de porter un fusil, pour moi c’est quand même un signe d’élégance morale.</p>
	<p>Une femme sans homme, c’est comme un poisson sans bicyclette.</p>
	<p>La culture, c’est comme l’amour. Il faut y aller par petits coups au début pour bien en jouir plus tard.</p>
	<p>Les imbéciles n’ont jamais de cancer. C’est scientifique.</p>
	<p>Desproges.</p>
	<div>
		<p>J’ai le plus profond respect pour le mépris que j’ai des hommes.</p>
		<p>Les animaux sont moins intolérants que nous : un cochon affamé mangera du musulman.</p>
		<p>Tous les animaux sont utiles à l’homme, parce qu’ils nous aiment, nous gardent et qu’on les bouffe.</p>
		<p>Desproges.</p>
	</div>

Les pseudo-éléments 

Démo
	<style> 
	p::before	{
		content:"Citations - "
	}
	p::after	{
		content:"- Desproges"
	}
	p::first-letter	{
		font-size:3em;
	}
	p::first-line	{
		color:red;
	}
	</style>  
	</head> 
	<body> 
	<p>
	C’est complètement faux de dire que le cochon est sale, c’est le paysan qui est sale de mettre le cochon dans la merde.
	<br> Au Laos, les cochons vivent dans la nature, 
	ils dorment dans les maisons, ils ne sont pas plus sales que les Laotiens qui sont des gens très propres.<br>
	Simplement, les cochons s’appellent Kiki… et les Laotiens mangent leurs chiens.
	</p>

:disable :enabled

Démo
<style> 
input[type=text]:disabled{
	background-color:#FFAAAA;
}
option:disabled{
	background-color:#FFAAAA;
}
</style>
</head>
<body>
<form action="">
  Nom: <input type="text" name="nom" disabled><br>
Prénom: <input type="text" name="prenom"><br>
Pays: 
<select>
	<option value=1 >Belgique</option>
	<option value=5>Espagne</option>
	<option value=4 disabled>France</option>
	<option value=5>Italie</option>
	<option value=2 disabled>Luxembourg</option>
	<option value=3 >Pays-Bas</option>
</select>
</form>

:focus

Démo
<style> 
input[type=text]:focus{
	background-color:#FFAAAA;
}
</style>
</head>
<body>
<form action="">
Nom: <input type="text" name="nom"><br>
Prénom: <input type="text" name="prenom"><br>
</form>