Regard sur le premier sélecteur de structure CSS3
Une chose que j’aime dans CSS3 est la nouvelle addition de sélecteurs qui nous permet de cibler des éléments spécifiquement sans s’appuyer sur la classe, identifiant ou un autre attribut d'élément, et celui que nous allons couvrir ici est le sélecteur suivant, : premier du type.
le : premier du type le sélecteur ciblera le premier enfant de l'élément spécifié, par exemple, l'extrait de code ci-dessous ciblera le premier h2 sur la page web.
h2: premier-de-type / * déclaration de style * /
le : premier du type est également égal à : nième de type (1), donc plutôt que de ne sélectionner que le premier du type, nous pouvons en outre sélectionner le deuxième, le troisième et ainsi de suite. L'extrait suivant ciblera le deuxième h2 élément sur la page web.
h2: nth de type (2) / * déclaration de style * /
: premier du type” contre. “:premier enfant”
Il peut sembler que ces deux sélecteurs fassent la même chose, mais ce n'est pas le cas. Voyons la démonstration suivante:
Disons que nous avons cinq éléments de paragraphe enveloppés dans un div, comme ça:
Paragraphe 1
Paragraphe 2
Paragraphe 3
Paragraphe 4
Paragraphe 5
Maintenant, nous voudrions sélectionner le premier paragraphe en utilisant le :premier enfant sélecteur.
p: premier enfant padding: 5px 10px; border-radius: 2px; arrière-plan: # 8960a7; couleur: #fff; bordure: solide 1px # 5b456a;
Et comme nous l'avions prévu, le premier paragraphe est sélectionné avec succès.
- : Démo premier enfant
Cependant, quand nous ajouter un élément différent avant le premier paragraphe, disons un h1, comme l'extrait ci-dessous:
Titre 1
Paragraphe 1
Paragraphe 2
Paragraphe 3
Paragraphe 4
Paragraphe 5
le premier paragraphe ne sera pas sélectionné, en tant que premier enfant à l'intérieur du div est plus un paragraphe, mais est maintenant un h1.
Donc, voici la situation où le : premier du type le sélecteur vient résoudre le problème.
p: premier du type padding: 5px 10px; border-radius: 2px; arrière-plan: # a8b700; couleur: #fff; bordure: solide 1px # 597500;
- : premier démo de type
le “Dernier” Sélecteur
Où il y a le “premier”, alors il y aura aussi le “dernier”.
L'inverse des deux sélecteurs dont nous avons discuté ci-dessus sont les deux sélecteurs suivants; la :dernier enfant et le : dernier de type. Ils sont fondamentalement les mêmes que les deux précédents, sauf qu’ils ciblent le dernier enfant de l'élément spécifié.
Par exemple, cet extrait ci-dessous ciblera le dernier paragraphe à l'intérieur de la division.
p: last-child padding: 5px 10px; border-radius: 2px; arrière-plan: # 8960a7; couleur: #fff; bordure: solide 1px # 5b456a;
- : dernière démo enfant
Et cet extrait ciblera également le dernier paragraphe dans la même situation que celle décrite ci-dessus; cette fois la est suivi directement par un élément différent.
p: dernier type padding: 5px 10px; border-radius: 2px; arrière-plan: # a8b700; couleur: #fff; bordure: solide 1px # 597500;
- : dernière démo du type
Le Selectivizr
Comme toute autre nouvelle fonctionnalité de CSS3, ces sélecteurs ne sont pas supportés par les anciens navigateurs, principalement Internet Explorer 6 à 8, avec une exception pour le :premier enfant sélecteur, comme il a été ajouté depuis CSS2.1. Son parent le :dernier enfant n'a été ajouté qu'en CSS3.
Donc, si tous les sélecteurs que nous avons mentionnés ici sont vraiment nécessaires pour votre site Web, vous pouvez utiliser une bibliothèque JavaScript appelée Selectivizr émuler la fonctionnalité de ces sélecteurs CSS3.
La Selectivizr dépend d’autres bibliothèques JavaScript pour fonctionner, telles que jQuery, Dojo, Prototype et MooTools; et comme le montre le tableau de comparaison sur le site officiel, MooTools semble être capable de gérer tous les sélecteurs.
Alors, incluons-le avec le Selectivizr, comme suit:
Le commentaire conditionnel ci-dessus garantira que ces bibliothèques ne seront chargées que dans Internet Explorer 8 et inférieur.
Enfin, vous pouvez voir la démo à partir des liens suivants et elle devrait maintenant fonctionner à la fois dans les navigateurs modernes et anciens (IE8 et les versions antérieures). Vous pouvez également télécharger le fichier source pour un examen plus approfondi. Prendre plaisir.
- Démo
- Source de téléchargement
