Informatique


Les sélecteurs

Aller à

Qu'est-ce qu'un sélecteur?

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 sélecteur 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.

 Les sélecteurs

Notation Nom Signification
Les sélecteurs de types (S.)
* S universel cible tous les éléments.
X S de types cible tout élément X.
X Y S descendant cible tout élément Y dont un ancêtre est un élément X.
X > Y S d'enfant cible tout élément Y enfant direct d'un élément X.
X + Y S adjacent cible tout élément Y dont le prédécesseur immédiat est un élément 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
X[attr]   vrai si l'élément X porte l'attribut attr quelle que soit sa valeur.
X[attr="val"]   vrai si l'élément X porte l'attribut attr de valeur "val".
X[attr^="val"]   vrai si l'élément X porte l'attribut attr dont la valeur commence par la chaîne "val".
X[attr$="val"]   vrai si l'élément X porte l'attribut attr dont la valeur finit par la chaîne "val".
X[attr*="val"]   vrai si l'élément X porte l'attribut attr dont la valeur contient la sous-chaîne "val".
X[attr~="val"] (pour mémoire) vrai si l'élément X porte l'attribut attr dont la valeur contient la chaîne "val" au sein de valeurs séparées par des espaces.
X[attr|="val"] (pour mémoire) vrai si l'élément X porte 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.
Les pseudo-classes (PC)
Les pseudo-classes permettent de sélectionner des éléments en fonc tion de leur état.
a : link
a : visited
a : hover
a : active
PC "hyperliens" cible les liens non visités, visités, survolés, cliqués.
X : hover
X : active
X : focus
PC "objets" cible les objets survolés, activés (sur clic de la souris) ou prêts à recevoir des données (les formulaires).
X:first-child
X:last-child
PC premier enfant
PC dernier enfant
vrai si l'élément sélectionné est le premier fils de son père
vrai si l'élément sélectionné est le premier fils de son père.
La pseudo-classe structurelle
X:nth-child(n)
X:nth-last-child(n)
PC structurelle un élément X qui est le n-ième enfant de son parent en comptant depuis le premier enfant
un élément X qui est le n-ième enfant de son parent en comptant depuis le dernier enfant
Les pseudo-classes pour les formulaires
:focus   cible l'élément de formulaire qui a le focus
:checked   spécifique aux cases à cocher, sélectionne les cases à cocher
: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
:required
:optional
(pour mémoire) cible les élément requis ou optionnels
:read-only
:read-write
(pour mémoire) cible les élément en lecture seule, ou en lecture-écriture
:enabled
:disabled
(pour mémoire) cible les élément actifs ou non de la page
Les pseudo-éléments (PE)
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
PE première ligne
PE première lettre
PE "après" l'élément
PE "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

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>mMdigliani</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 l'enfant de la balise, c'est-à-dire le descendant direct
  • le premier <em> dans la balise <p> est son enfant et subit donc le style
  • le deuxième <em> est inclus dans une balise <strong> et ne subit donc pas le style car le <em> n'est plus un enfant direct de <p>
  • si on enlève le > côté style, le deuxième <em> subira le style car il est descendant de <p>
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....</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  

  • côté style le signe + indique, dans l'exemple, qu'on vise les <p> dont la balise précédente dans le flux est 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
  • il est important dans le cas de ce sélecteur de bien savoir dans quel ordre les balises sont organisées dans le flux
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> 
	<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 plusieurs 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 contirnt 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> 

Les pseudo-classes des hyperliens  

Démo
	<style> 
	body {background-color:#00ff00} 
	a	{font-size:2em;color:red;text-decoration:none;}  /*idem ps link*/
	a:hover	{color:blue;text-decoration:underline;}  
	a:active	{color:black;text-decoration:none;}  /*au clic*/
	a:visited	{color:white;text-decoration:none;}  
	</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 avent 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-last-child(n) est l'élément X qui est le n-ième enfant de son 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>