Dans une page web, il ya de nombreuses listes d'éléments :
Pouvoir sélectionner les éléments d'une telle série n'est pas anodin. Une méthode classique consiste à attribuer une classe ou un identifiant à chaque, mais les pseudo-classes nous offre un moyen qui nous permet de garder les mains dans ls CSS.
La base absolue de ce système est nth-child()
.
element:nth-child(position) { propriété_css : valeur; }
nth-child
est toujours suivi de parenthèse dans lesquels il faudra écrire la position recherchée :
Reprenons notre code HTML :
<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1> <p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href="http://w3.org"> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p> <p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p>
du CSS :
abbr:nth-child
(1) {color
:green
; }
pour un rendu :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisable dans de nombreux contextes.
On voit ici que le premier abbr
du titre est affecté, ainsi que le premier abbr
du paragraphe et enfin W3C est le premier abbr
du lien.
Cette méthode est particulièrement utile pour les listes pour définir des comportements spécifiques avec certaines positions. En général, la première sera traitée comme un titre :
<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1> <p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href=«http://w3.org»> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p> <p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p> <ul> <li>Les avantages du CSS</li> <li>Une séparation du contenu textuel et de la présentation graphique</li> <li>Des facilités pour changer tout un site en quelques instructions</li> <li>Une clarté dans la construction</li> <li>Des possibilités de présentations impossibles autrement</li> <li>Une simplicité d'utilisation à toute épreuve et qui fait référence</li> </ul>
du CSS :
li { list-style
:none
; }
li:nth-child
(1) {
color
:green
;
border-bottom
:solid 1px black
;
}
pour un rendu :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisable dans de nombreux contextes.
Lorsqu'il s'agit de sélectionner les premiers et les derniers, des pseudo-classes spécifiques ont été ajoutées. Si la sélection du premier est assez simple avec nth-child
, la chose se complique avec le dernier, car noter un indice de position dans la liste pourra marcher à certains endroits du site mais pas à tous puisque les listes peuvent être de taille différentes. :last-child
pourra donc être indispensable dans de nombreux cas.
li { list-style
:none
; }
li:first-child
{
color
:green
;
border-bottom
:solid 1px black
;
}
li:last-child
{
border-bottom
:solid 1px black
;
}
pour un rendu qui nous permet de boucler la liste par une bordure de la longueur de l'élément :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisable dans de nombreux contextes.
Pour continuer dans les cas particuliers de nth-child()
, il est possible de remplacer les valeurs chiffrées par des mots-clés ou des formules de recherche. Les mot-clés odd
et even
permettront de sélectionner les éléments pairs et impairs de la liste
li {
list-style
:none
; }li:nth-child(odd)
{background-color
:#DDD
; }li:nth-child(even)
{color:
; }
green
pour avoir assez simplement une alternance dans la liste :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisable dans de nombreux contextes.
Toutes ses pseudo-classes peuvent être complétées par de nombreuses autres qui sont beaucoup moins utilisées. Le temps dira si elles s'imposeront.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.