Comment utiliser les nouveaux sélecteurs CSS3 - dummies

CSS3 prend en charge plusieurs nouveaux sélecteurs avec de nouvelles fonctionnalités intéressantes que vous devriez connaître. Vous pouvez utiliser ces nouvelles fonctionnalités pour améliorer les pages de manière encore meilleure qu'auparavant.

Sélection d'attribut

Vous pouvez maintenant appliquer un style à n'importe quel élément avec une valeur d'attribut spécifique. Par exemple, la balise d'entrée prend différentes formes, toutes déterminées par l'attribut type. Si vous appliquez un seul style à l'élément d'entrée, ce style s'applique à de nombreux types d'éléments différents: cases à cocher, champs de texte et boutons radio. En utilisant la nouvelle syntaxe d'attribut, vous pouvez appliquer un style à n'importe quel élément d'entrée:

input [type = "text"] {background-color: #CCCCFF;}

Vous pouvez appliquer le style avec ou sans type de tag, mais il est possible d'avoir des effets secondaires inattendus si vous choisissez un attribut extrêmement commun.

pas

Il y a des fois où vous voulez une sélection inverse. Par exemple, imaginez que vous vouliez appliquer un style à tous les paragraphes qui ne sont pas membres de la classe spéciale:

p: non (.special) {border: 1px rouge fixe;}

nth-child

Le sélecteur nth-child vous permet de sélectionner un ou plusieurs éléments dans un groupe. La version de base utilise une entrée numérique:

#myList> li: nth-child (1) {border: 1px solid blue;}

Ceci vous permet d'appliquer un style au premier d'un groupe d'éléments. Dans l'exemple, il y a une liste avec quatre éléments. Le style est appliqué aux éléments de la liste, pas à la liste.

La valeur numérique peut en fait être une formule, comme un + b. Si vous aimez l'algèbre (et qui ne le fait pas?), Vous pouvez sélectionner tous les éléments pairs comme ceci:

#myList> li: nth-child (2n) {bordure: 1px bleu uni;}

Une formule similaire peut être utilisée pour choisir les enfants impairs.

#myList> li: nth-child (2n + 1) {border: 1px solid blue;}

Vous pouvez utiliser ce système de formules pour obtenir toutes sortes de regroupements, mais la plupart des gens ont simplement besoin d'un élément particulier. toutes les lignes paires ou impaires. CSS3 fournit des raccourcis clavier, pair et impair, donc vous n'avez pas besoin de le faire en utilisant les maths:

#myList> li: nth-child (pair) {color: white; background-color: red;}

Le mot-clé vous permet de choisir le dernier élément d'un groupe. Il y a quelques autres variantes de cette technique de sélection:

• : nth-last-child (N) : Fonctionne exactement comme nth-child, excepté les comptes de la fin du groupe d'éléments plutôt que le début.

• : nth-of-type (N) : Ce sélecteur fonctionne exactement comme nth-child, sauf qu'il filtre un type spécifique et ignore tous les éléments qui ne sont pas exactement du même type d'élément.

• last-child : Ceci (assez naturellement) sélectionne le dernier élément enfant.

• last-nième-de-type (N) : Fonctionne comme nth-of-type, mais à partir de la fin du groupe.

• first-child : Récupère le premier élément (techniquement c'était disponible en CSS2, mais il était rarement utilisé).

Ces outils de sélection sont entièrement pris en charge dans tous les navigateurs récents. Cependant, comme ils sont généralement utilisés simplement pour améliorer la lisibilité, il convient de les utiliser en toute sécurité. Les anciens navigateurs ignorent simplement le style.

Autres nouvelles pseudo-classes

Les pseudo-classes permettent de spécifier des styles en fonction de l'état d'un élément. CSS moderne prend en charge un certain nombre de nouvelles pseudo-classes:

• : hover : La pseudo-classe: hover fait partie de CSS depuis le début, mais elle n'a été officiellement définie que pour le tag. Maintenant, la pseudo-classe: hover peut être appliquée à n'importe quel élément. Si la souris est sur un élément, cet élément a l'état activé. Notez que les périphériques mobiles ne prennent pas toujours en charge car la position du périphérique de pointage n'est pas connue tant que l'élément n'est pas activé.

• : focus : La pseudo-classe: focus est activée lorsqu'un élément est prêt à recevoir une entrée au clavier.

• : actif : Un élément de formulaire est actif lorsqu'il est en cours d'utilisation: par exemple, lorsqu'un bouton a été enfoncé mais pas encore relâché. Les appareils mobiles passent souvent directement en mode actif sans passer par le mode survol. Cela peut être un facteur de conception important lors de l'utilisation de l'état pour le style.

Les pseudo-classes d'état sont entièrement supportées par tous les navigateurs modernes à l'exception de la famille de navigateurs IE. Il existe un support limité mais buggé dans les premières versions d'IE.