• Introduction
• Découvrir le CSS
• CSS et Web
• Mettre en forme le HTML grâce au CSS
• Appliquer à une balise
• Règle d'importance
• Sélectionner les éléments à styler
• Appliquer à un élément spécifique grâce aux ID
• Appliquer à plusieurs éléments grâce aux classes
• Sélectionner les éléments selon la hiérarchie
• Sélectionner selon la position dans le code
• Sélectionner selon des types prédéfinis avec les pseudo-classes
• Les pseudo-éléments
• Sélectionner selon la position dans une série
• Sélectionner en excluant un élément particulier
• Sélectionner des balises selon les attributs
• Propriétés de texte
• Changer la police
• Corps et taille du texte
• Les marges et retraits
• Marges de paragraphes
• Alignement
• Changer les couleurs
• Graisse et style
• Changer la casse
• Lettrines CSS
• Propriétés de mise en page
• Mettre en colonne
• Césures
• Gestion du flux des éléments
• Positionner un élément
• Mise en forme de tableaux
• Effets
• Bordures et filets de paragraphe
• Ombres sur le texte
• Ombres sur la zone
• Ajouter des dégradés sur les zones
• Arrondis avec border-radius
• Modifier le contenu
• Changer l'aspect de la première ligne
• Ajouter automatiquement du texte
• Compter les éléments
• Les Animations
• Approche des animations CSS
• Créer une transition CSS
• Créer des animations CSS
• Créer un diaporama en CSS
• Les transformations
• Design Adaptatif (responsive web design)
• Qu'est-ce que le design adaptatif ?
• Enlever les paramètres par défaut des navigateurs
• Les unités de mesure adaptables
• Tester l'adaptabilité
• Définir le viewport
• Dimension des blocs
• Appliquer aux images
• Gérer le texte
• Les médias queries
• test

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 :

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 :

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 :

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 :

 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.