Sélecteurs d'attributs CSS2 avec Regex

Question

CSS Attribute selectors permettent la sélection d'éléments en fonction des valeurs d'attribut. Malheureusement, je ne les ai pas utilisés depuis des années (principalement parce qu'ils ne sont pas supportés par tous les navigateurs modernes). Cependant, je me souviens distinctement que j'ai pu les utiliser pour orner tous les liens externes avec une icône, en utilisant un code similaire à ce qui suit:

a[href=http] { 
    background: url(external-uri); 
    padding-left: 12px; 
} 

Le code ci-dessus ne fonctionne pas. Ma question est: Comment ça marche? Comment puis-je sélectionner tous les tags <a> dont l'attribut href commence par "http"? La spécification CSS officielle (liée ci-dessus) ne mentionne même pas que c'est possible. Mais je me souviens d'avoir fait ça.

(Remarque:.. La solution évidente serait d'utiliser class attributs pour la distinction que je veux éviter cela parce que j'ai peu d'influence de la façon dont le code HTML est construit Tout ce que je peux modifier est le code CSS.)

Answer 1

Quant au CSS 2.1, voir http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

résumé:

 
    Attribute selectors may match in four ways: 

    [att] 
    Match when the element sets the "att" attribute, whatever the value of the attribute. 
    [att=val] 
    Match when the element's "att" attribute value is exactly "val". 
    [att~=val] 
    Match when the element's "att" attribute value is a space-separated list of 
    "words", one of which is exactly "val". If this selector is used, the words in the 
    value must not contain spaces (since they are separated by spaces). 
    [att|=val] 
    Match when the element's "att" attribute value is a hyphen-separated list of 
    "words", beginning with "val". The match always starts at the beginning of the 
    attribute value. This is primarily intended to allow language subcode matches 
    (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]). 

CSS3 also defines a list of selectors, mais the compatibility varies hugely.

Il y a aussi a nifty test suite qui montre quels sélecteurs fonctionnent dans votre navigateur.

Quant à votre exemple,

a[href^=http] 
{ 
    background: url(external-uri); 
    padding-left: 12px; 
} 

devrait faire l'affaire. Malheureusement, il n'est pas supporté par IE.

Answer 2

Notez que, dans l'exemple de Antti vous voudriez probablement ajouter une prise pour tous les liens absolus que vous pourriez avoir à votre propre domaine, que vous probablement ne pas veulent marquer comme « externe », par exemple:

a[href^="http://your.domain.com"] 
{ 
    background: none; 
    padding: 0; 
} 

Et vous voudriez ce après la déclaration précédente.

Vous pouvez également inclure le préfixe complet du protocole, au cas où vous avez un document local nommé « http-info.html » que vous souhaitez créer un lien, par exemple:

a[href^="http://"] 
{ 
    background: url(external-uri); 
    padding-left: 12px; 
} 

Notez que, Dans ces deux cas un peu plus complexes, vous devez indiquer la valeur. Ce travail, pour moi, dans IE7.

Answer 3

réponse de Antti suffit pour sélectionner son point d'ancrage dont de href commencent par http et donne un aperçu parfait sur les disponibles CSS2 regex-esque sélecteurs d'attributs, comme ceci:

Attribute selectors may match in four ways: 

[att] 
Match when the element sets the "att" attribute, whatever the value of the attribute. 
[att=val] 
Match when the element's "att" attribute value is exactly "val". 
[att~=val] 
Match when the element's "att" attribute value is a space-separated list of 
"words", one of which is exactly "val". If this selector is used, the words in the 
value must not contain spaces (since they are separated by spaces). 
[att|=val] 
Match when the element's "att" attribute value is a hyphen-separated list of 
"words", beginning with "val". The match always starts at the beginning of the 
attribute value. This is primarily intended to allow language subcode matches 
(e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]). 

Cependant , voici la façon appropriée et mise à jour pour sélectionner tous les liens sortants en utilisant le nouveau CSS3 :not pseudo class selector ainsi que le nouveau *= substring syntax pour s'assurer qu'il ne tient pas compte des liens internes qui peuvent encore commencer par http:

a[href^=http]:not([href*="yourdomain.com"]) 
{ 
    background: url(external-uri); 
    padding-left: 12px; 
} 

* Notez que ceci est non pris en charge par IE, jusqu'à au moins IE8. Merci, IE, vous êtes le meilleur: P