Fermer

octobre 23, 2018

Assemblage de l’ADN de HTML avec les sélecteurs d’attributs CSS


À propos de l'auteur

John est un conteur ayant des compétences en conception et en développement. Le jour, il conçoit et construit des sites Web et des applications mobiles. Le soir, il lit des histoires de science-fiction dans StoryLab…
Pour en savoir plus sur John

Les sélecteurs d'attributs sont magiques. Ils peuvent vous aider à éviter les problèmes épineux, à éviter d'ajouter des classes et à signaler certains problèmes dans votre code. Mais ne vous inquiétez pas, les sélecteurs d’attributs sont complexes et puissants, mais ils sont faciles à apprendre et à utiliser. Dans cet article, nous discuterons de leur fonctionnement et vous donnerons quelques idées sur la façon de les utiliser.

Pendant la majeure partie de ma carrière, les sélecteurs d'attributs ont été plus magiques que scientifiques. Je regardais, gobsmacked, le CSS pour sortir un lien dans une feuille de style d’impression, sans rien comprendre. Je le ferais consciencieusement pour le copier et le coller dans ma feuille de style d'impression, puis exécuter le projet le plus volumineux possible.

Mais vous n'avez plus besoin de regarder les sélecteurs d'attributs CSS. À la fin de cet article, vous les utiliserez pour exécuter des diagnostics sur votre site, résoudre des problèmes autrement insolubles et générer des expériences technologiques si avancées qu’elles ont l’impression d’être magiques. Vous pensez peut-être que je promets trop et vous avez raison, mais une fois que vous avez compris le pouvoir des sélecteurs d'attributs, vous pourriez avoir l'impression de vous exagérer.

Au niveau le plus élémentaire, vous mettez un attribut HTML entre crochets et appelez-le sélecteur d'attribut comme ceci:

[href]  {
   couleur: chartreuse;
}

Le texte de tout élément comportant un href et n’ayant pas de sélecteur plus spécifique se transformera maintenant, comme par magie, en chartreuse. La spécificité de sélecteur d'attribut est la même que celle de classes.

Note : Pour plus d'informations sur la correspondance de cage qui est une spécificité CSS, vous pouvez lire « Spécificité CSS: choses à savoir "Ou si vous aimez Star Wars:" CSS Specificity Wars ".

Mais vous pouvez faire beaucoup plus avec les sélecteurs d'attributs. Tout comme votre ADN, ils ont une logique intégrée pour vous aider à choisir toutes sortes de combinaisons d'attributs et de valeurs. Au lieu de ne faire que correspondre exactement à la manière dont une balise, une classe ou un sélecteur id le ferait, ils peuvent faire correspondre n'importe quel attribut et même les valeurs de chaîne dans les attributs.