Classes et identifiants.

Groupement.

Il est possible de regouper plusieurs sélecteurs dans une même déclaration en les séparant par une virgule. Valable pour les classes et les identifiants.

.class1, class2, #id1 {
.....
}

<p class="class1 class2">Texte</p>

h1, h2, h3 {
.....
}
								

Il est aussi possible de chainer plusieurs classes en les mettant à la suite. Ainsi, pour que le style s'applique, l'élément doit posséder les deux valeurs.

div.class1.class2 {
.....
}

<div class="class1 class2">

</div>
								

Combinaison de sélecteurs.

Il est possible de combiner plusieurs sélecteurs. div.texte ne s'applique qu'aux balises 'div' possédant la 'class' texte. Dans 'div p span', le style ne s'appliquera que sur les balises span contenues récursisement dans des balises 'p' et 'div' (cf inclusion).

div.texte {
....
}

div p span {
....
}
								

A compléter...


Inclusion.

Quand les sélecteurs sont séparés par un espace, le style s'appplique au dernier élément quelque soit son niveau d'inclusion. L'élément 'li' sera lui même compris dans des balises 'ol' ou 'ul'. L'inclusion n'est pas directe et admet des niveaux intermédiaires.

div li {
.....
}

								

Inclusion directe.

Quand les sélecteurs sont séparés par un >, le style s'appplique a 'li' si sont parent directe est 'ol'. Dans l'exemple ci-dessous, le style ne s'appliquera pas à 'Titre' car il est contenu dans un élément 'h1'. Par contre le style s'appliquera à tous les 'li' dont le parent direct est 'ol' quelque soit leur niveau d'inclusion dans d'autres balises. Dans l'exemple ci-dessous, les styles s'appliquent à tous les 'li', sauf au premier bien sûr... Il est aussi possible de mettre plusieurs sélecteurs enfants et de les combiner avec d'autres sélecteurs et classes.

ol > li {
.....
}


<ol>
	<li><h1>Titre</h1></li>	
	<li>texte</li>
</ol>

<nav>
	<div>
		<ol>
			<li>Texte</li>		
		</ol>	
	</div>
</nav>

div > p > span {
....
}
								

Mixer les inclusions.

div > p#id01 span {
....
}

<div>
	<p id="id01">
		<h1>titre</h1>
		<span>Le style s'applique.</span>	
	</p>
</div>

<div>
	<h1>titre</h1>
	<p id="id01">
		<span>Le style ne s'applique pas.</span>	
	</p>
</div>
								

Attention !

Eviter autant que possible ce genre de mixage:div > p#id01 span qui est trop restrictif et très peu flexible. Lui préférer ce genre de syntaxe: div > p > span. Tout comme il est inutile de noter:div.maClasse, écrire directement .maClasse. A ce sujet, se référer à l'article sur OOCSS.


Fraterie immédiate ou sélecteur adjacent directe.

Quand les sélecteurs sont séparés par un + , le style s'appplique à l'élément suivant directement un autre mais dont les deux ont le même parent. Dans l'exemple ci-dessous, les styles ne s'appliqueront qu'au 'Texte' et pas au 'Texte deux' ni au 'Texte trois'.

h1 + p {
.....
}

<section>
	<h1>Titre</h1>	
	<p>Texte</p>
	<p>Texte deux</p>
		<div>
			<h1>Titre 2</h1>
			<p>Texte trois </p>		
		</div>
</section>
								

A compléter...

Sélecteur de fraterie ou sélecteur adjacent.

Quand les sélecteurs sont séparés par un ~ , le style s'appplique à l'élément suivant même si d'autres éléments s'intercalent entre eux mais doivent avoir le même parent. Dans l'exemple ci-dessous, les styles au 'Texte' et 'Texte deux' mais pas au 'Texte trois'.

h1 ~ p {
.....
}

<section>
	<h1>Titre</h1>	
	<p>Texte</p>
	<p>Texte deux</p>
		<div>
			<h1>Titre 2</h1>
			<p>Texte trois </p>		
		</div>
</section>
								

Sélecteur universel *.

Ce sélecteur sélectionne tous les élémnts du document à partir de sa racine. Utilisé avec d'autres sélecteurs, il permet d'en sélectionner tous les éléments enfants. Attention cependant, les éléments doivent accepter les des proprités spécifiées. Dans l'exemples ci-dessous, certains éléments ne supportent pas la propriété 'border'. * situé après un éléments permet d'appliquer le style à tous ses enfants comme dans le cas de 'div *'. * placé avant un élémént appliquera le style à tous ces éléments, c'est la valeur implicite dans une CSS donc inutile comme dans '* p'.

* {
border: 2px;
}

div * {
....
}

* p {
....
}

égal à:

p {
....
}
								

Sélecteur d'attribut.

Les sélecteurs permettent de cibler un élément en fonction d'un attribut unique (exemple 'title').

*[title] {
/* cible tous les éléménts l'attribut 'title' */
}

img[title] {
/* cible toutes les images possédant l'attribut 'title' */
}

a[href] {
/* cible tout les liens avec l'attribut 'href' */
}

								

Sélecteur avec un critère sur une ou plusieurs valeurs d'un attribut.

Les opérateurs de comparaison supportés sont:

  • = : égalité stricte.
  • ~= : contient la valeur.
  • *= : contient les caratères.
  • ^= : commence par les caractères.
  • $= : se termine par les caractères.

p[class="big"] {
/* cible tous les éléments 'p' possédant strictement la valeur 'big' */
}

a[href="http://www.chezmoi.com"] {
/* cible tout les liens possédant cette chaine de valeur */
}


p[class~="big"] {
/* cible tous les éléments 'p' possédant au moins la valeur 'big' */
}
							

Avec le sélecteur ~= il est possible de cibler un attribut ayant une liste de valeurs séparées par un espace comme suit:

a[data-info~="externe"] {
....
}
 
a[data-info~="image"] {
....
}

<a href="/monImage.jpg" data-info="externe image">Lien.</a>

							

Sélecteur ciblant une sous chaîne.

Ces sélecteurs permettent une sélection à l'intérieur de la valeur de l'attribut.

p[class*="big"] {
/* cible tous les éléments 'p' dont la valeur 'big' apparait quelque part */
}

p[class^="big-"] {
/* cible tous les éléments 'p' dont la valeur commence par 'big-' */
}

a[href$=".com"] {
/* cible tout les liens dont la valeur finie par '.com' */
}
								

Et la casse dans tout ça:

Il est possible de cibler des valeurs sans tenir compte de la casse en ajoutant le drapeau 'i' ou 'I' de cette manière:

p[class*="big" i] {
/* cible tous les éléments 'p' dont la valeur 'big', 
avec ou sans majuscules, apparait quelque part */
}
									

Attention ! pas de support pour IE!

il est aussi possible d'effectuer une comparaison de valeur sensible à la cass en ajoutant un 's' ou 'S' de la même manière, mais seul firefox le supporte pour le moment.



Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/11/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11