CSS2 sélecteur d'Attribut avec la Regex

Attribut CSS sélecteurs permettre la sélection des éléments basés sur des valeurs d'attribut. Malheureusement, je n'ai pas utilisé dans années (principalement parce qu'ils ne sont pas pris en charge par tous les navigateurs modernes). Cependant, je me souviens distinctement que j'ai été en mesure de les utiliser pour orner tous les liens externes avec une icône, à l'aide d'un code semblable au suivant:

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

Le code ci-dessus ne fonctionne pas. Ma question est: Comment ça fonctionne? Comment puis-je sélectionner tous les <a> balises dont href attribut commence par "http"? L'officiel de la CSS (lien ci-dessus) ne mentionne même pas que c'est possible. Mais je me souviens de cela.

(Note: la solution La plus évidente serait d'utiliser class attributs de distinction. 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 le code CSS.)

OriginalL'auteur Konrad Rudolph | 2008-09-08

  1. 24

    Que pour le CSS 2.1, voir http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

    Résumé:

     Sélecteur d'attribut peuvent correspondre à de quatre façons: 

[att] 
De Match, les ensembles d'éléments de la "att" attribut, quelle que soit la valeur de l'attribut. 
[att=val] 
Match lorsque l'élément "att" valeur de l'attribut est exactement "val". 
[att~=val] 
Match lorsque l'élément "att" valeur de l'attribut est un espace-liste séparée par des 
"les mots", dont l'un est exactement "val". Si ce sélecteur est utilisé, les mots dans la 
la valeur ne doit pas contenir d'espaces (puisqu'ils sont séparés par des espaces). 
[att|=val] 
Match lorsque l'élément "att" valeur de l'attribut est un trait d'union-liste séparée par des 
"les mots", en commençant par "val". Le match commence toujours au début de la 
la valeur de l'attribut. Cela est principalement destiné à permettre la langue de sous-code correspond à 
(par exemple, le "lang" de l'attribut HTML) comme décrit dans la RFC 3066 ([RFC3066]).

    CSS3 définit également une liste de sélecteurs, mais la compatibilité peut varier considérablement.

    Il y a aussi une chouette suite de tests qu'qui montre les sélecteurs de travail dans votre navigateur.

    Comme pour ton exemple,

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

    devrait faire l'affaire. Malheureusement, il n'est pas pris en charge par IE.

    Je pensais que IE7 ne s'en charge? Juste ce que j'ai lu.. sachant IE ce n'est probablement pas le cas
    La "chouette la suite de test" est maintenant un lien brisé. Quelqu'un aurait un substitut?
    Correction du lien.

    OriginalL'auteur

  2. 7

    Antti réponse est suffisante pour la sélection de l'ancre dont href commencer avec http et donne un parfait aperçu de la disposition des CSS2 regex-esque sélecteur d'attribut, comme suit:

    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, ici, est le cas échéant, mis à JOUR de manière à sélectionner tous les liens sortants à l'aide de la nouvelle CSS3 :non pseudo sélecteur de classe ainsi que la nouvelle *= sous-chaîne de la syntaxe pour s'assurer qu'il ignore tout des liens internes qui peuvent toujours commencer avec http:

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

    *Notez que ce n'est pas pris en charge par IE, au moins jusqu'à IE8. Merci, c'est à dire, vous êtes les meilleurs 😛

    OriginalL'auteur

  3. 2

    Noter que, dans Antti l'exemple que vous auriez probablement souhaitez ajouter un catch de tout les liens absolus vous pouvez avoir votre propre domaine, vous avez probablement ne pas souhaitez marquer comme "externes", par exemple:

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

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

    Vous pouvez également inclure le préfixe de protocole, juste au cas où vous avez un document nommé "http-info.html" que vous souhaitez faire un lien, par exemple:

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

    Noter que, dans ces deux légèrement en-cas plus complexes, vous devez citer la valeur. Ces travaux, pour moi, dans IE7.

    OriginalL'auteur