C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Les sélecteurs et pseudo-classes : CSS3

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.infographizm.com
avatar
{ Membre }
{ Membre }

Masculin Messages : 49



Les sélecteurs et pseudo-classes : CSS3


Informations générales

Description :
Ce cours s'adresse à ceux qui ont déjà des bases de html et css. J'entends par là que vous devez comprendre de quoi je cause quand je parle de classes, de propriétés, d'attributs et de balises.

À noter : Il est recommandé d'avoir d'abord lu ce premier post sur les sélecteurs CSS2.1. Ce cours-ci ne traîtera que des nouveaux sélecteurs apportés par la prochaine version de CSS à venir (CSS3).

Démo :
Aucune démonstration disponible

Testé sur :
Firefox, Chrome, Safari, Opera, Internet Explorer

Crédits :
Proposé par Manumanu le 29/01/2013 | Validé par Espeon

Mise(s) à jour :
Pas de mise à jour pour l'instant

Le tutoriel


Encore une fois, je rappelle que le CSS3 (et donc tous les sélecteur et pseudo-classes qui vont suivre) est récent, que les spécifications du web prennent des années à être terminées (10 ans pour le CSS2.1) et donc que les vieux navigateurs ne les prennent pas et ne PEUVENT évidemment PAS les prendre en compte.

Aucun problème concernant les navigateurs récents (minimum 2011).

Vous pouvez vous référer au site Can I Use pour savoir avec quelles versions de navigateurs les différents sélecteurs sont compatibles.


Les espaces de noms (namespace)


 namespace|div { color: red }


Une des grandes nouveautés apportées par cette nouvelle version est la gestion des espaces de noms. Les programmeurs sauront de quoi je parle. Pour faire simple, on peut définir un espace de nom particulier et n'appliquer des propriétés qu'aux balises dans cet espace de nom.

Exemple :
Définissons un espace de nom pour une page particulière :
Code:
@namespace produits url(http://www.monsite.com/produits.html);
Puis un espace de nom pour une autre page :
Code:
@namespace membre url(http://www.monsite.com/membre.html);

Il est désormais possible d'appliquer des modifications qui ne seront spécifiques qu'à ces pages :
Code:
/* propriétés qui ne seront appliqués que sur les balises h1 de la page définie par l'espace de nom "produits"*/
produits|h1 { color: red }

/* uniquement les balises h1 dans la page définie par "membre"
membre|h1 { color: red }

/* uniquement les balises h1 qui ne sont PAS dans un espace de nom (donc autre que dans les pages définies plus haut */
|h1 { color: red }

/* tout élément h1 dans n'importe quel espace de nom */
*|h1 { color: red }

/* par défaut */
h1 {color: red}
À noter qu'il est possible de définir un nom d'espace par défaut :
Code:
@namespace "http://www.monsite.com";
Tous les sélecteurs css qui n'ont pas d'espace de nom spécifié seront donc attribués à celui-ci.

Les sélecteurs


Sélecteur d'adjacence indirecte : "~"


 h1~pre { color: red }

Dans la même idée que les sélecteurs d'adjacence +, celui-ci permet d'atteindre tout élément (ici pre) de même niveau que l'élément référent (ici h1). La différence étant qu'ici, l'élément cible n'a pas besoin d'être directement adjacent à l'élément référent.

Code:
<h1>Titre</h1>
<p>Pas affecté</p>
<pre>Affecté</pre>
<p>Pas affecté</p>

Sélecteur d'attribut


a[href^=https] { color: red }

Ce sélecteur permet de choisir un élément dont la valeur de l'attribut commence par ce que vous avez défini. Dans l'exemple, tous les liens dont l'adresse commence par "https".
Code:
<a href="http://www.monsite.com">Ce lien ne sera pas affecté</a>
<a href="https://www.monsite.com">Ce lien sera affecté</a>
Évidemment, ça ne se limite pas qu'aux liens.

a[href$=.pdf] { color: red }

Avec celui-ci, on peut choisir à l'inverse un élément dont la valeur de l'attribut fini par ce que vous avez défini. L'exemple au-dessus permet donc de choisir tous les liens vers un fichier PDF.

Code:
<a href="monfichier.doc">Ce lien ne sera pas affecté</a>
<a href="monfichier.pdf">Ce lien sera affecté</a>
<a href="monfichier.pdf.doc">Ce lien ne sera pas affecté</a>

a[href*=monsite] { color: red }

Celui-ci enfin, permet de sélectionner l'élément dont l'attribut désigné comporte au moins la chaîne de caractère définie.

Code:
<a href="http://www.lesite.com">Ce lien ne sera pas affecté</a>
<a href="http://www.monsite.com">Ce lien sera affecté</a>

Les pseudo-classes


:not-first-child


Cette pseudo-classe complète :first-child en proposant l'inverse, c'est à dire choisir tous les éléments qui ne soient pas le premier enfant de leur parent. Par exemple :
div p:not-first-child { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>
Code:
<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>
Souvenez-vous qu'il s'agit du premier enfant d'un parent, et pas le premier d'un type défini. Dans ce cas-ci, c'est h2 qui est le premier enfant, donc aucun p n'est premier enfant.

:last-child


À la manière de :first-child, cette pseudo-classe cible un élément s'il est le dernier enfant de son parent.
div p:last-child { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Si on voit maintenant, pour le même code CSS, ce code HTML :
Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>
Rien ne va se passer. En effet, le code CSS signifie "cibler tous les éléments p s'il s'agit du dernier enfant de leur parent" et non "cibler tous les éléments p qui sont les derniers de ce éléments de type p enfants". Or dans ce cas, c'est h2 qui est le dernier enfant.

:not-last-child


À la manière de :not-first-child, cette pseudo-classe cible tout élément qui n'est pas le dernier enfant de son parent.
div p:not-last-child { color: red }

Code:
<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Attention toutefois, rappelez-vous que ça ne fonctionne qu'avec le dernier enfant et non avec le dernier enfant d'un type particulier :
Code:
<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>

</div>
Rien ne va se passer car aucun p n'est le dernier enfant de son parent, c'est h2.

:first-of-type


L'élément manquant à :first-child. Cette pseudo-classe permet cette fois-ci de cibler un élément qui est le premier type d'élément de son parent.

div p:first-of-type { color: red }

Code:
<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>
Code:
<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

:not-first-of-type


Comme précédemment, elle permet de sélectionner tout élément qui ne sera pas le premier du type défini dans son parent.

div p:not-first-of-type { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>
Code:
<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>

:last-of-type


Le parfait opposé de :first-of-type. Cette pseudo-classe permet cette fois-ci de cibler un élément qui est le dernier type d'élément de son parent.

div p:last-of-type { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
</div>
Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>

:not-last-of-type


Encore une fois, l'ajout de not- est explicite : elle permet de cibler toute balise qui ne soit pas le dernier d'un type défini.

div p:not-last-of-type { color: red }

Code:
<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>

:only-of-type


Un peu plus particulier cette-fois ci, cette pseudo-classe permet d'affecter un élément qui est le seul de son type par rapport à son parent.

div p:only-of-type { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>
Code:
<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément sera affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>

:not-only-of-type


Encore une fois, cette pseudo-classe précédée de "not-" permet de faire l'inverse de la pseudo-classe associé. Ici, on va donc cibler tout élément qui n'est pas le seul de son type.

div p:not-only-of-type { color: red }


Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
</div>

Code:
<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>
Code:
<div>
   <h2>Ce titre sera affecté</h2>
   <p>Cet élément ne sera pas affecté</p>
   <h2>Ce titre sera affecté</h2>
</div>

:only-child


Comme son nom l'indique, cette pseudo-classe n'agit que sur un élément qui est le seul enfant de son parent.

div p:only-child { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>
Code:
<div>
   <p>Cet élément sera affecté</p>
</div>

:not-only-child


Celle-ci permet maintenant de cibler tout élément qui n'est pas le seul enfant de son parent.

div p:not-only-child { color: red }

Code:
<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>
Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
</div>

:nth-child(n)


Un peu particulier, cette pseudo-classe permet de cibler un élément qui est le nième enfant de son parent. Par exemple, si on veut choisir le second élément d'une liste :

li:nth-child(2) { color: red }

Code:
<ul>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément sera affecté</li>
   <li>Cet élément ne sera pas affecté</li>
</ul>

:nth-last-child(n)


Même chose que précédement, mais cette fois le décompte de n commence en partant du dernier enfant. Par exemple, si on veut cibler l'avant-dernier élément d'une liste :

li:nth-last-child(2) { color: red }

Code:
<ul>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément sera affecté</li>
   <li>Cet élément ne sera pas affecté</li>
</ul>

:nth-of-type(n)


Similaire à :nth-child(n), celle-ci permet de cibler le nième enfant d'un type défini. Par exemple, si on veut choisir le troisième paragraphe :

p:nth-of-type(3) { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Sachant qu'il s'agit de type et non de nombre d'enfant, on peut s'en servir même lorsqu'il y a des balises entre deux :
Code:
<div>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

:nth-last-of-type(n)


Cette fois-ci, vous pouvez cibler le dernier d'un type, en partant du dernier de ce même type. Par exemple pour un avant-dernier paragraphe :

p:nth-last-of-type(3) { color: red }

Code:
<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Sachant qu'il s'agit de type et non de nombre d'enfant, on peut s'en servir même lorsqu'il y a des balises entre deux :
Code:
<div>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

:not(selecteur)


Un peu particulier encore une fois, cette pseudo-classe permet d'affecter tout élément qui n'est pas du type spécifié.
Un exemple :

:not(p) { color: red }

Code:
<div>
   <ul>
      <li>Cet élément sera affecté</li>
      <li>
         Cet élément sera affecté.
         <p>Cet élément ne sera pas affecté</p>
      </li>
   </ul>
   <p>Cet élément ne sera pas affecté</p>
</div>

:empty


Une pseudo-classe toute simple qui permet de cibler tout élément qui n'a aucun enfant.

p:empty { color: red }

Code:
<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté <span>car il contient un enfant</span></p>
</div>

:contains(foo)


Une pseudo-classe toute simple qui permet de cibler tout élément qui contient la chaîne de caractère définie.

p:contains(Glub) { color: red }

Code:
<div>
   <p>Glab: Cet élément ne sera pas affecté</p>
   <p>Glob: Cet élément ne sera pas affecté</p>
   <p>Glub: Cet élément sera affecté</p>
</div>

:enabled


Celle-ci permet de cibler tout élément qui est, soit par défaut, soit précisément via html, défini comme "actif". C'est surtout utile pour les éléments de formulaire.

input:enabled { background: white }

Code:
<input type="text" /> <!-- cet élément sera affecté -->
<input type="text" disabled="disabled" /> <!-- cet élément ne sera pas affecté, il est désactivé -->

:disabled


À l'inverse, cette pseudo-classe permet de cibler un élément défini comme désactivé.

input:disabled { background: grey }

Code:
<input type="text" /> <!-- cet élément ne sera pas affecté, il n'est pas désactivé -->
<input type="text" disabled="disabled" /> <!-- cet élément sera affecté, il est désactivé -->

Conclusion... ?


Tout en essayant d'être complet, je n'ai pas été exhaustif. Le CSS3 est une norme loin d'être terminée, qui évolue encore, et qui pourrait voir d'autres éléments s'ajouter par la suite.
Comme toujours, n'oubliez pas qu'on peut toujours mixer plusieurs sélecteurs !


Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !


Dernière édition par Manumanu le Jeu 31 Jan 2013, 14:23, édité 6 fois
MessageSujet: Les sélecteurs et pseudo-classes : CSS3   Mar 29 Jan 2013, 13:44
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



04-02-2013 - Tutoriel validé par CSSActif


MessageSujet: Re: Les sélecteurs et pseudo-classes : CSS3   Lun 04 Fév 2013, 06:29
Revenir en haut Aller en bas
 

Les sélecteurs et pseudo-classes : CSS3

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Pseudo-objet - Générateur de code
» comment faire clic droit et mon pseudo apparait
» origine de votre pseudo
» NFH (un pseudo fort peu bavard)
» Anonymous Strawberry* ou comment faire un long pseudo

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit