O seletor de atributos CSS não funciona como href

99

Eu preciso usar o seletor de atributos no css para alterar o link em cores e imagens diferentes, mas não funciona.

Eu tenho este html:

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

E este css:

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

Por que o fundo não é vermelho?

html css css-selectors

— Igor Kraskynlykov
fonte

14

+1 porque eu não sabia sobre um [attribute = 'AttributeName']

— SpaceBeers

7

@SpaceBeers, isso é element[attribute_name="attribute_value"].

— JMM

193

Use o $ após seu href. Isso fará com que o valor do atributo corresponda ao final da string.

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)

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

— Livro de zeus
fonte

1

Valor do atributo para corresponder ao final da string. soa como um bônus !!

— Jack

6

Esta resposta tem melhores explicações dos seletores do que w3schools.

— Jeff

1

A resposta aceita (usando a[href$='.pdf']) pressupõe que um link para um pdf sempre terminará com .pdf. Esse não é necessariamente o caso, já que o link pode ter uma string de consulta ou um fragmento hash, por exemplo, com um código de rastreamento UTM ou um número de página, caso em que esses links não seriam correspondidos. Na verdade, dependendo do seu aplicativo, esse pode ser o caso para a maioria dos links.

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

Se você quiser garantir que sua regra também seja aplicada nesses casos, você pode corresponder a .pdfqualquer lugar no atributo usando

a[href*='.pdf']

No entanto, isso corresponderá a algumas coisas improváveis, mas não intencionais, como um subdomínio our.pdf.domain.com/a-page. Mas podemos restringi-lo ainda mais, pois sabemos que só o usaríamos para corresponder a PDFs que têm uma string de consulta ou fragmento hash. Se combinarmos os 3 casos, devemos combinar todos os links em PDF.

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

— Inwerpsel
fonte