Graph' Power
Bienvenue sur Graph' Power !!
Je te souhaite une bonne visite sur le forum.
Si tu est inscrit connecte-toi !
Mais si tu est un invité... tu ne vas pas tardé a t'inscrire x)

Les Staff de GP

Graph' Power

.F E R M E R.
 

Partagez | 
 

 [COURS] Sélecteurs CSS3

Aller en bas 
AuteurMessage
Manumanu
GPiens
GPiens
avatar

Messages : 189
Date d'inscription : 19/09/2011
Age : 30
Localisation : Perpignan

MessageSujet: [COURS] Sélecteurs CSS3   Sam 12 Nov - 14:58


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 cours sur les sélecteurs CSS. Ce cours-ci ne traîtera que des nouveaux sélecteurs apportés par la prochaine version de CSS à venir (CSS3).
Bien qu'il soit un peu tôt pour en profiter, la plupart des navigateurs récents les implémentent relativement bien.


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

.:: 1. Les sélecteurs d'enfant ::.



Sélecteur de succession : "~"

 p~ul { color: red }

Dans la même idée que les sélecteurs d'adjacence +, celui-ci permet d'atteindre tout élément (ici ul) dont le prédecesseur est le premier élément défini (ici p).

Code:

<p>Texte</p>
<ul>Affecté</ul>
<ul>Pas affecté</ul>
<p>Texte</p>
<ul>Affecté</ul>



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

.:: 3. Les pseudo-classes ::.




:not-first-child

Cet élément 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, cet élément 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 :no-first-child, cet élément 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. Cet élément permet cette fois-ci de choisir 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, il 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. Cet élément permet cette fois-ci de choisir 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 : il permet de sélectionner 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, ce sélecteur 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, ce selecteur précédé de "not-" permet de faire l'inverse du sélecteur associé. Ici, on va donc sélectionner 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, ce sélecteur 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

Celui-ci permet maintenant de choisir 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, ce sélecteur permet de sélectionner 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 choisir 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), celui-ci permet de sélectionner le nième enfant d'un type défini. Par exemple, si on veut choisir le troisième paragraphe :

li: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 sélectionner le dernier d'un type, en partant du dernier de ce même type. Par exemple pour un avant-dernier paragraphe :

li: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, ce sélecteur 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

Un sélecteur tout simple qui permet de sélectionner 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)

Un sélecteur tout simple qui permet de sélectionner 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

Celui-ci permet de sélectionner 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.

p:contains(Glub) { color: red }

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, ce sélecteur permet d'affecter un élément défini comme désactivé.

p:contains(Glub) { color: red }

Code:

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


.:: 4. 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 !

À bientôt pour d'autres cours !

PS: N'hésitez pas si vous avez des questions.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.infographizm.com
Kevin
GPiens
GPiens
avatar

Messages : 18
Date d'inscription : 22/08/2011

MessageSujet: Re: [COURS] Sélecteurs CSS3   Lun 26 Mar - 15:58

Merci Beacuoup Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
[COURS] Sélecteurs CSS3
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» L'affichage de la carte disparaît en cours de navigation
» Ouvrir un fichier dans Mapsource sans effacer les données en cours?
» Problème sur l'arret en cours
» Cours ImageReady
» Cours par ChatBox - Samedi 19 Janvier 2013

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graph' Power :: Cours Libre-
Sauter vers:  
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit