Sélecteur d'attributs CSS3 ciblant le type de fichier

Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédié à vous aider à faire de vous un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

le sélecteurs d'attributs est une fonctionnalité vraiment utile pour sélectionner un élément sans ajouter de superflu identifiant ou Des classes. Tant que l'élément ciblé a un attribut comme href, src et type nous n'avons pas à le faire.

Les sélecteurs d'attributs ont effectivement été autour depuis CSS 2.1, et maintenant, avec quelques types supplémentaires de sélecteurs d'attribut ajoutés aux spécifications CSS3, nous sommes en mesure de cibler l'attribut de l'élément de manière encore plus spécifique..

Et, dans ce post, nous allons utiliser l’une des syntaxes pour sélectionner le Type de fichier qui est inséré dans la valeur de l'attribut.

Prise en charge de la syntaxe et du navigateur

le Type de fichier est toujours à la fin du nom du fichier. Alors, pour sélectionner ça Type de fichier nous pouvons utiliser la syntaxe suivante [attr $ = "valeur"]. Cette syntaxe utilise le $ = opérateur qui ciblera la fin de la valeur d'attribut, par exemple:

 a [href $ = ". pdf"]: before background: url ('… /images/document-pdf-text.png') no-repeat;  

L'extrait ci-dessus sélectionnera chaque lien par lequel la valeur de l'attribut se termine .pdf et insérez un mot-document-icône dans le :avant pseudo-élément.

PDF Icon Source: Icônes de la fugue

Bien qu’il s’agisse d’une utilisation courante de ce sélecteur, nous pouvons certainement aller au-delà de cela..

En ce qui concerne la compatibilité du navigateur; Bien que cette syntaxe soit officiellement introduite en tant que spécification CSS3, elle est en fait supportée depuis Internet Explorer 7, afin que vous puissiez l'appliquer en toute sécurité à travers toutes vos conceptions.

L'exemple

Tu ne sauras jamais si tu n'essaies pas. Nous devons juste essayer quelque chose de nouveau pour mieux comprendre quelque chose que nous ne comprenons pas encore. Donc, ici, nous allons montrer comment cette syntaxe peut être très utile et utile pour cibler un élément dans une structure HTML particulière qui était un peu difficile à appliquer en utilisant uniquement du CSS pur.

Ci-dessous, nous avons un Structure HTML5 pour lister trois images avec sa légende. C’est uniquement à des fins de démonstration, votre balisage ne doit pas nécessairement être identique à l’extrait suivant (par exemple, vous n’avez peut-être qu’une image, voire trois images supplémentaires), mais vous devez savoir comment cette syntaxe peut être appliquée. une structure HTML particulière.

Chacune des images énumérées ci-dessus a les formats ou les extensions suivantes, jpg, png, et gif. Ils ont également une légende qui représente son extension d'image; cette légende servira alors d'étiquette d'image.

Donc, voici le plan, nous allons donner différentes couleurs d’arrière-plan pour la légende pour chaque extension d’image. L’image JPG aura un vert couleur de la légende, le PNG obtiendra bleu, et enfin le gif obtiendra violet.

Tout d'abord, définissons la position de la balise figure relativement, car nous allons appliquer absolu position pour la légende.

 figure position: relative;  

Ajoutez une petite décoration pour les images avec des bordures et des ombres.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Nous définissons ensuite le style et le positionnement par défaut de la légende. La légende ou l'étiquette de l'image aura un carré de 50 pixels.

 img + figcaption color: #fff; position: absolue; en haut: 0; à droite: 0; largeur: 50px; hauteur: 50px; hauteur de ligne: 50px; text-align: center;  

Il est maintenant temps d'ajouter la couleur de fond. Pour ce faire, nous pouvons combiner le sélecteur d'attribut avec le sélecteur frère adjacent, +.

 img [src $ = ". jpg"] + figcaption background-color: # a8b700;  

L'extrait ci-dessus ciblera chaque image avec l'attribut source se terminant par .jpg, alors le sélecteur adjacent trouvera l'élément à côté de lui. Dans ce cas, le figcaption sera ajouté avec le # a8b700 Couleur de fond.

Et voici tous les codes pour le reste des formats d'image, .png et .gif.

 img [src $ = ". png"] + figcaption background-color: # 389abe;  img [src $ = ".gif"] + figcaption background-color: # 8960a7;  

Voyons maintenant comment cela se passe en direct à partir du lien de démonstration ci-dessous, ou bien vous pouvez télécharger le code source pour l'examiner hors ligne..

• Démo
• Source de téléchargement

Les sources d'images sont les suivantes: MacPro 1, MacPro 2 et MacPro 3

Conclusion

Nous espérons que vous pourrez voir le côté élégant du style en utilisant un sélecteur spécial, comme ce que nous avons essayé de démontrer ci-dessus en utilisant le sélecteur d'attribut. Ainsi, la prochaine fois que vous créerez votre code HTML, nous vous recommandons vivement de faire des recherches pour savoir si votre style peut être appliqué à l'aide d'un sélecteur spécial, plutôt que de ruiner votre balisage correctement structuré. Des classes ou identifiant.

Il y a actuellement deux nouveaux sélecteurs de ce type que nous couvrirons dans les prochains posts, alors restez branchés.