Sites


CSS3

Sélectionner selon la position dans une série

 Dans une page web, il ya de nombreuses listes d'éléments :

  • liste de titres ;
  • série de paragraphes à la chaîne ;
  • liste de lien ou navigation ;
  • ou encore simple liste à puce ou numérotée.

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.

Sélectionner le énième avec nth-child()

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 :

  1. indique tous les premiers éléments de leur contexte ;
  2. indique tous les seconds éléments de leur contexte…

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 :

Utiliser du CSS3 avec du HTML5

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 :

Utiliser du CSS3 avec du HTML5

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.

  • Les avantages du CSS
  • Une séparation du contenu textuel et de la présentation graphique
  • Des facilités pour changer tout un site en quelques instructions
  • Une clarté dans la construction
  • Des possibilités de présentations impossibles autrement
  • Une simplicité d'utilisation à toute épreuve et qui fait référence

Les premiers et derniers avec :first-child :last-child

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 :

Utiliser du CSS3 avec du HTML5

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.

  • Les avantages du CSS
  • Une séparation du contenu textuel et de la présentation graphique
  • Des facilités pour changer tout un site en quelques instructions
  • Une clarté dans la construction
  • Des possibilités de présentations impossibles autrement
  • Une simplicité d'utilisation à toute épreuve et qui fait référence

Un sur deux avec odd et even

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 :

Utiliser du CSS3 avec du HTML5

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.

  • Les avantages du CSS
  • Une séparation du contenu textuel et de la présentation graphique
  • Des facilités pour changer tout un site en quelques instructions
  • Une clarté dans la construction
  • Des possibilités de présentations impossibles autrement
  • Une simplicité d'utilisation à toute épreuve et qui fait référence

 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.