Comment utiliser les sélecteurs de modèle CSS3 - les nuls

Dans certains cas, une sélection que vous devez faire dans CSS3 n'a rien à voir avec les balises ou les attributs, mais le modèle dans lequel les objets apparaissent sur la page. Par exemple, vous pouvez sélectionner uniquement le premier objet, quel que soit son objet.

Dans certains cas, vous souhaitez formater d'une manière ou d'une autre des membres alternatifs d'une liste ou d'un autre élément de données répétitif afin de permettre à l'utilisateur de voir chaque élément plus facilement. La liste suivante vous indique les sélecteurs de modèle couramment utilisés par les documents.

: première lettre: Sélectionnez la première lettre de l'objet spécifié. Ce sélecteur est utile pour créer des effets textuels spéciaux, tels que des lettrines.

Il est extrêmement rare de voir la plupart des sélecteurs de motifs utilisés seuls, car vous ne voulez généralement pas mettre en forme uniquement la première lettre de chaque objet de la page d'une certaine manière. Généralement, vous voyez des sélecteurs de modèle utilisés en combinaison avec un sélecteur d'attribut, tel que le sélecteur de classe, ou avec un sélecteur de tag particulier.

L'utilisation globale de sélecteurs de formes peut avoir des résultats inattendus ou même entraîner l'échec d'une application (en fonction de l'interaction entre le code de l'application et le CSS).
: première ligne: Sélectionne la première ligne de l'objet spécifié.
: avant: Sélectionne la zone immédiatement avant le contenu de l'objet spécifié. Ce sélecteur est normalement couplé à la propriété content pour insérer quelque chose de spécial avant le contenu de l'objet existant.
: après: Sélectionne la zone immédiatement après le contenu de l'objet spécifié. Ce sélecteur est normalement couplé à la propriété content pour insérer quelque chose de spécial avant le contenu de l'objet existant.
: premier-type: Sélectionne le premier objet d'un type spécifique.

Même si la spécification ne vous dit pas que vous devez fournir un type ou un parent, certains sélecteurs de modèles ne fonctionneront pas sans un. Généralement, vous voyez le: sélecteur de premier type utilisé avec un sélecteur d'étiquette (p: first-of-type, par exemple), mais il peut également être utilisé avec un sélecteur d'attribut. Tous les autres sélecteurs de type et de motif enfant fonctionnent de la même manière.
: dernier-type: Sélectionne le dernier objet d'un type spécifique.
: uniquement de type: Sélectionne le seul objet d'un type spécifique. S'il y a plus d'un objet d'un type particulier, aucune sélection n'est faite.
: nth-of-type ( Number ): Sélectionne l'objet spécifié d'un type spécifique.
: nième-dernier-type ( Nombre ): Sélectionne l'objet spécifié d'un type spécifique, en commençant à la fin de la liste d'objets.
: first-child: Sélectionne le premier enfant d'un objet spécifié. Ce sélecteur est généralement utilisé pour appliquer une mise en forme spéciale au premier élément d'une liste ou d'un tableau.
: last-child: Sélectionne le dernier enfant d'un parent particulier.
: only-child: Sélectionne le seul enfant d'un parent particulier. Lorsqu'un objet parent a plus d'un enfant, aucune sélection n'est effectuée.
: nth-child ( Nombre ): Sélectionne l'enfant spécifié d'un parent particulier.
: nth-last-child ( Number ): Sélectionne l'enfant spécifié d'un parent particulier à partir de la fin de la liste des enfants.

Les sélecteurs de motifs peuvent créer des effets intéressants sur votre site. La procédure suivante examine rapidement ce que ces sélecteurs peuvent faire. Il est important de se rappeler que vous verrez souvent des sélecteurs, y compris des sélecteurs de modèles, alors considérez ceci comme un point de départ.

Créez le fichier ExternalCSS. HTML et ExternalCSS. Fichiers CSS et copiez-les dans un nouveau dossier.
Ouvrir ExternalCSS. HTML
Tapez le code suivant après la balise
existante dans le fichier et enregistrez les modifications sur le disque.
```
Un
Deux
Trois
Quatre
Cinq
```
Dans ce cas, vous ajoutez une liste à la page pour faciliter la détection des motifs. Bien sûr, les modèles ne sont pas limités aux listes ou aux tableaux. Vous pouvez les utiliser avec n'importe quel arrangement d'objets qui pourraient se prêter à la sélection par un modèle.
Ouvrir ExternalCSS. CSS.

Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.

. ListItem: première lettre {font-size: xx-large;}. ListItem: après {content: "27A8"; taille de police: x-large; La couleur rouge;}. ListItem: nth-child (impair) {background-color: LightBlue;}. ListItem: nth-child (2n + 2) {background-color: LightGreen;}

Recharge la page de test.

Vous voyez l'effet de la modification du style. Pour commencer, chaque balle commence par une lettre extra-large.

À la fin de chaque balle, vous voyez un caractère de flèche spécial. Notez comment le CSS utilise 27A8 pour créer ce personnage. Lors de la visualisation de graphiques tels que celui de ikreator. com et celui de Petterhesselberg. com, vous voyez ces codes de caractères présentés avec une combinaison & # au début. CSS utilise les mêmes codes numériques, mais s'appuie sur une barre oblique inverse (/).

Le sélecteur: nth-child () peut être utilisé de plusieurs façons. Même si l'exemple ne l'affiche pas, vous pouvez fournir un nombre pour sélectionner un élément enfant spécifique. Cependant, ce sélecteur accepte également un certain nombre d'autres entrées intéressantes. Par exemple, vous pouvez utiliser les mots-clés pair et impair pour sélectionner les objets pairs ou impairs dans une liste.

Vous pouvez également fournir une équation qui utilise n pour indiquer l'objet actuel. Lorsque le navigateur saisit 0 pour n, par exemple, l'équation devient 2 * 0 + 2 ou l'élément 2. Si vous vouliez commencer par l'élément 3, vous utiliseriez 2n + 3. L'équation que vous fournissez peut être de toute complexité requise pour produire le résultat souhaité.