Le sélecteur d'attribut CSS ne fonctionne pas avec href

99

J'ai besoin d'utiliser le sélecteur d'attribut en css pour changer le lien sur différentes couleurs et images, mais cela ne fonctionne pas.

J'ai ce html:

<a href="/manual.pdf">A PDF File</a>

Et ce css:

a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }

Pourquoi le fond n'est-il pas rouge?

html css css-selectors

— Igor Kraskynlykov
source

14

+1 parce que je ne connaissais pas un [attribut = 'AttributeName']

— SpaceBeers

7

@SpaceBeers, c'est ça element[attribute_name="attribute_value"].

— JMM

193

Utilisez le $ après votre href. Cela rendra la valeur de l'attribut correspondant à la fin de la chaîne.

a[href$='.pdf'] { /*css*/ }

JSFiddle: http://jsfiddle.net/UG9ud/

E[foo]        an E element with a "foo" attribute (CSS 2)
E[foo="bar"]  an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2)
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3)
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3)
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3)
E[foo|="en"]  an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)

source: http://www.w3.org/TR/selectors/

— Livre de Zeus
source

1

Valeur d'attribut correspondant à la fin de la chaîne. sonne comme un bonus !!

— Jack

6

Cette réponse a de meilleures explications sur les sélecteurs que w3schools.

— Jeff

1

La réponse acceptée (utilisant a[href$='.pdf']) suppose qu'un lien vers un pdf se terminera toujours par .pdf. Ce n'est pas nécessairement le cas, car le lien pourrait avoir une chaîne de requête ou un fragment de hachage, par exemple avec un code de suivi UTM ou un numéro de page, auquel cas ces liens ne seraient pas mis en correspondance. En fait, selon votre application, cela pourrait être le cas pour la plupart des liens.

<a href="/manual.pdf?utm_source=homepage">A PDF File</a>
<a href="/manual.pdf#page=42">A PDF File</a>

Si vous voulez vous assurer que votre règle est également appliquée dans ces cas, vous pouvez faire correspondre .pdfn'importe où dans l'attribut en utilisant

a[href*='.pdf']

Cependant, cela correspondra alors à des choses improbables mais involontaires, telles qu'un sous-domaine our.pdf.domain.com/a-page. Mais nous pouvons le réduire davantage, car nous savons que nous ne l'utiliserions que pour les fichiers PDF qui ont une chaîne de requête ou un fragment de hachage. Si nous combinons les 3 cas, nous devrions faire correspondre tous les liens pdf.

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
    background: red;
}

— Inwerpsel
source