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.

 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
[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>Mdigliani</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 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  

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>

: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>