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;
  }

Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius