Comment utiliser les nouveaux sélecteurs CSS3

CSS3 supporte plusieurs nouveaux sélecteurs avec de nouvelles fonctionnalités intéressantes que vous devez vous familiariser avec. Vous pouvez utiliser ces nouvelles fonctionnalités pour améliorer les pages en même meilleures façons qu'avant.

Sélection d'attribut

Vous pouvez maintenant appliquer un style à un élément avec une valeur d'attribut spécifique. Par exemple, la contribution tag prend des formes différentes, tous déterminés par le type attribuer. Si vous appliquez un style unique à la contribution élément, que le style soit appliquée à de nombreux types différents d'éléments: des cases à cocher, des champs de texte, et les boutons radio. En utilisant la nouvelle syntaxe d'attribut, vous pouvez appliquer un style à un élément d'entrée:

 entrée [type = "text"] {background-color: # CCCCFF-}

Vous pouvez appliquer le style avec ou sans un type d'étiquette, mais il est possible d'avoir des effets secondaires inattendus si vous choisissez un attribut très commun.

pas

Il ya des moments que vous voulez un choix inverse. Par exemple, imaginez que vous vouliez appliquer un style à tous les paragraphes qui ne sont pas membres de la spécial classe:

 p: non (.special) {border: 1px solid rouges}

nième enfant

La nième enfant sélecteur 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 bleus}

Cela vous permet d'appliquer un style à la première d'un groupe d'éléments. Dans l'exemple, il ya une liste de quatre éléments. Le style est appliqué aux éléments de liste, pas la liste.

La valeur numérique peut effectivement être une formule, comme un b +. Si vous aimez l'algèbre (? Et qui n'a pas), vous pouvez sélectionner tous les éléments de numéro pair comme ceci:

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

Une formule similaire peut être utilisée pour ramasser les enfants impaires.

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

Vous pouvez utiliser ce système de formule pour obtenir toutes sortes de groupes, mais la plupart des gens tout simplement besoin d'un élément particulier, ou toutes les lignes paires ou impaires. Fournitures CSS3 raccourci mots-clés, même et impair, de sorte que vous ne devez pas le faire en utilisant les mathématiques:

 #myList> li: nth-child (même) {color: white-background-color: rouges}

Le mot-clé vous permet de choisir le dernier élément d'un groupe. Il existe encore quelques variations de cette technique de sélection:

• : nth-last-child (N): Fonctionne comme nième enfant, sauf les chiffres de la fin du groupe d'éléments plutôt que sur le début.

• :nième-of-type (N): Ce sélecteur fonctionne exactement comme nième enfant , sauf que ce filtre à un type spécifique et ignore tous les éléments qui ne sont pas exactement du même type d'élément.

• dernier enfant: Cette (naturellement) sélectionne le dernier élément enfant.

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

• premier enfant: Saisit le premier élément (techniquement cela était disponible en CSS2, mais il a été rarement utilisé).

Ces outils de sélection sont entièrement soutenus dans tous les navigateurs récents. Cependant, comme ils sont généralement utilisés simplement pour améliorer la lisibilité, il doit être sûr de les utiliser. Les navigateurs plus anciens simplement sauter le style.

Autres nouvelles pseudo-classes

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

• : hover: La :flotter pseudo-classe a été une partie de CSS depuis le début, mais il a été officiellement défini uniquement pour le tag. Maintenant le :flotter pseudo-classe 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 appareils mobiles ne prennent pas toujours en raison de la position du dispositif de pointage ne sait pas ce que l'option est activée.

• :concentrer: La :concentrer pseudo-classe est activé quand un élément est prêt à recevoir les entrées au clavier.

• : actif: Un élément de formulaire est actif quand il est actuellement utilisé: par exemple, quand un bouton a été pressé, mais pas encore publié. Les appareils mobiles souvent sauter directement au mode actif sans passer par flotter Mode. Cela peut être une importante considération lors de la conception en utilisant l'état pour le style.

Les pseudo-classes de l'État sont entièrement pris en charge par tous les navigateurs modernes, à l'exception de la famille de navigateurs IE. Il est un soutien limité mais un bogue de même dans les premières versions de IE.