BOURSE

Forum

Réagissez dans les forums de JDN Développeurs

Les feuilles de style sont conçues autour du trio sélecteur/propriété/valeur : telle valeur V est assignée à la propriété P des balises reconnues par le sélecteur. Ainsi,
a {
  border: 5px;
  }
… indique que toutes les balises A doivent afficher une bordure de 5 pixels.

Tout cela serait bien limité s'il n'existait pas de nombreux types de sélecteurs mis à disposition des développeurs. Celui abordé ici, le sélecteur d'attribut (attribute selector) est apparu avec la spécification CSS 2.1, et permet de préciser le sélecteur en indiquant les attributs que doivent compter les balises visées.

Les attributs peuvent être indiqués de quatre manières principales :
a[name] {
  border: 5px;
  }
…visera toutes les balises a disposant d'un attribut name.

a[name="titre"] {
  border: 5px;
  }
…correspond aux balises a ayant un attribut name égal à "titre" (et seulement ce mot).

a[name~="titre"] {
  border: 5px;
  }
…l'attribut name contient au moins "titre".

a[name|="titre"] {
  border: 5px;
  }
…name commence par titre, et peut être suivi d'autres mots.

Il est bien sûr possible de combiner les sélecteurs :
a[name="titre"][class="entete"] {
  border: 5px;
  }

Il devient par exemple possible de créer un affichage spécifique pour les liens vers les sites sécurisés :
a[href|="https"] {
  background: red;
  }