Aujourd'hui, nous allons en apprendre davantage sur les sélecteurs d'attributs. Que sont-ils? Comment puis-je les utiliser? Quels sont les nouveaux sélecteurs d'attributs CSS3? Nous répondrons à ces questions et plus encore.
Attributs HTML
Avant de vous présenter le concept de sélecteurs d'attributs CSS, vous devez savoir ce qu'est un attribut HTML. La bonne nouvelle est que vous en connaissez déjà plusieurs: classe, identifiant, style, et href par exemple. Il y en a beaucoup plus, consultez W3.org pour une liste complète.
CSS facilite le style de certains attributs. Par exemple, si nous voulons dénommer un identifiant ou classe, nous utilisons simplement ce qui suit.
Tout cela est bien beau, mais que se passe-t-il si nous voulons attribuer d'autres attributs? C'est ici qu'interviennent les sélecteurs d'attributs.
Sélecteurs d'attributs
Comme nous venons de l’apprendre, les sélecteurs d’attributs sont exactement ce qu’ils ressemblent, un moyen de sélectionner et de cibler des attributs spécifiques à l’aide de CSS. C'est en fait très facile à faire et implique simplement un ensemble de crochets contenant le code HTML que vous avez utilisé. Voyons comment cela fonctionne en regardant d'abord un code HTML de base.
Disons que je voulais cibler et styliser uniquement le lien Design Shack. Je pourrais utiliser des pseudo-sélecteurs, mais cela suppose que la liste reste dans cet ordre et que la prise en charge du navigateur n'est pas la meilleure. Au lieu de cela, ce que nous pouvons faire est d’utiliser un sélecteur d’attributs pour cibler le spécifique? Href? qui nous intéresse.
Répétition d'attributs
Un autre exemple très utilisé est la liste de contacts, dont un ou plusieurs doivent être nommés d’une certaine manière. En utilisant des attributs, nous pouvons différencier les amis et les contacts.
Nous pouvons ensuite aller et coiffer chacun de ces rel attribue différemment en utilisant la même syntaxe que ci-dessus. Tout comme avec une classe, plusieurs éléments peuvent répondre aux critères d'une déclaration.
En utilisant ce code, nous pouvons obtenir les résultats ci-dessous. Notez que même si nous commençons à ajouter de nouveaux contacts en haut de la liste, ces sélecteurs continueront de fonctionner là où : nième enfant ne serait pas. Assez cool non? De plus, à peu près tous les navigateurs actuels les prennent en charge, y compris IE de nouveau à la version 7!
Il est également important de noter qu'il n'est pas nécessaire d'être aussi spécifique. Le style suivant tout élément avec un rel attribut appliqué.
Gestion des valeurs multiples
La partie délicate à utiliser avec les sélecteurs d'attributs est qu'ils deviennent un peu amusants quand il y a plusieurs attributs. Considérons le tweak suivant à notre liste précédente.
Vous penseriez que le style du premier élément de la liste serait le même processus étant donné qu’il a toujours? Ami? en elle, mais ce n'est pas le cas. Simplement en utilisant = 'ami' ne parviendra plus à cibler cela. Au lieu de cela, nous devons utiliser ce qui suit, qui cherche? Ami? comme l'un des rel valeurs.
Cela se traduira par le? Larry? élément de la liste en gras où comme le précédent un [rel = 'ami'] la syntaxe l'aurait manqué.
Sélecteurs d'attributs CSS3
CSS3 nous a donné tant de nouveaux jouets et outils sympas pour jouer. Il n’est donc pas surprenant que de nouveaux sélecteurs d’attributs nous aident également à apporter encore plus de spécificité à notre ciblage. Commençons par mon préféré.
Attributs nommés similaires
C'est là que les choses deviennent géniales. Disons que vous aviez le code HTML suivant et que vous vouliez cibler uniquement le partie supérieure et section inférieurecomment le feriez-vous?
Une solution simple est le nouveau "sélecteur de valeur d'attribut de sous-chaîne arbitraire" ou "la petite astuce vraiment cool." Puisque les deux divs que nous voulons cibler tous les deux contiennent? Section? dans leurs noms, nous pouvons facilement les cibler.
Cela m'a époustouflé. Ici, nous utilisons CSS pour fouiller dans nos noms d’ID afin de trouver des valeurs spécifiques dans un nom plus grand et de cibler ces éléments. Cela ouvre beaucoup de possibilités et facilite grandement le ciblage complexe avec peu de balisage.
Début et fin
Alors que le sélecteur de valeur d'attribut de sous-chaîne arbitraire ciblera une chaîne donnée n'importe où, les versions Début et Fin permettent de traiter des cas plus rares dans lesquels vous souhaitez que le premier ou le dernier élément soit pris en compte.
Supposons que nous voulions cibler tous les comparses et faire en sorte que Larry et Moe soient rouges et bouclés en jaune. Pour ce faire, nous pouvons insérer utiliser [titre ^ = 'stooge'] pour attraper tous ceux avec? Stooge? comme le premier mot et [titre $ = 'stooge'] pour attraper tous ceux avec? Stooge? comme le dernier mot.
Chaînage des sélecteurs d'attributs
Supposons que vous souhaitiez obtenir des informations très spécifiques et ajouter plusieurs critères. C'est aussi simple que de chaîner plusieurs sélecteurs d'attributs. Voyons comment cela fonctionne avec le code HTML ci-dessous.
Maintenant, ciblons tout lien avec? Stooge? dans le titre, mais uniquement ceux commençant par? the ?.Notez que nous ne voulons pas cibler par hasard? parce que cela apparaît également dans le dernier élément. Voici la syntaxe pour y parvenir:
Simple droit? Tout ce que nous avons fait est de prendre les deux règles dont nous avions besoin et de les mettre sur la même ligne. Il est important de noter que ce n'est pas un scénario, mais un scénario à la fois / et. Seuls les éléments répondant aux deux critères seront modifiés.
Lectures complémentaires
Si vous êtes assez nerd pour aimer les sélecteurs d'attributs, il existe deux sources supplémentaires que je vous recommande vivement de consulter.
Astuces CSS
Tout d’abord, Chris Coyier a une introduction très approfondie à CSS Tricks, qui couvre une bonne partie du contenu que nous avons présenté ici. Chris est un super génie de CSS et les explique probablement beaucoup mieux que moi!
Le livre de CSS3
Ensuite, consultez Le livre de CSS3 de Peter Gasston, qui a été ma principale référence pour CSS3 ces dernières années. Je ne peux tout simplement pas en avoir assez de ce livre et je lui ai donné la position permanente sur mon bureau! Gasston ajoute à cette conversation une discussion sur les combinateurs généraux et frères adjacents, qui constituent un autre moyen intéressant de cibler certains éléments. Prenez le code HTML suivant comme exemple:
Maintenant, supposons que nous voulions cibler uniquement le "Choisis-moi!" paragraphe. Le combinateur de frères et soeurs adjacent fait exactement ce que nous faisons. Le code suivant cible tout p balises immédiatement précédées d'un h1 étiquette. Dans l'exemple ci-dessus, il n'y en a qu'un seul (le premier paragraphe après l'en-tête).
De même, le combinateur général de frères et soeurs nous permettra de cibler tout du p balises qui viennent après l'en-tête. Donc, le premier paragraphe ne changera pas de couleur, mais tous les autres le seront.
Ceci est juste un avant-goût, pour plus d'informations à ce sujet, consultez The Book of CSS3.
Prise en charge du navigateur
Comme je l'ai mentionné brièvement ci-dessus, pour autant que je sache, vous êtes assez couvert sur la plupart de ces techniques de retour à IE7 avec tous Majeur Les navigateurs actuels basculent support parfait. Cependant, ce n'est pas exactement un score complet, certains navigateurs moins connus étant un peu inégaux. Vous pouvez trouver une jolie petite table de navigateurs et leur support pour tout cela et plus sur dev.l-c-n.com.
Conclusion
Pour être honnête, je ne savais que très peu de choses sur les sélecteurs d'attributs CSS. Après un peu de recherche, j'ai été stupéfait de voir à quel point ils sont cool et déconcertés par le fait qu'ils semblent si rares (le support du navigateur est meilleur que celui de beaucoup de choses qui nous dérangent) Avec juste un peu de code, vous pouvez réaliser un ciblage remarquablement spécifique avec peu ou pas de balisage supplémentaire requis.
Laissez un commentaire et laissez-moi savoir ce que vous pensez des sélecteurs d'attributs et si vous les utilisez ou non!