El selector de atributos CSS no funciona como href

99

Necesito usar el selector de atributos en css para cambiar el enlace en diferentes colores e imágenes, pero no funciona.

Tengo este html:

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

Y 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 qué el fondo no es rojo?

html css css-selectors

— Igor Kraskynlykov
fuente

14

+1 porque no sabía sobre un [atributo = 'AttributeName']

— SpaceBeers

7

@SpaceBeers, eso es element[attribute_name="attribute_value"].

— JMM

193

Utilice $ después de su href. Esto hará que el valor del atributo coincida con el final de la cadena.

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)

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

— Libro de Zeus
fuente

1

Valor de atributo para que coincida con el final de la cadena. suena como un bono !!

— Jack

6

Esta respuesta tiene mejores explicaciones de los selectores que w3schools.

— Jeff

1

La respuesta aceptada (usando a[href$='.pdf']) asume que un enlace a un pdf siempre terminará con .pdf. Ese no es necesariamente el caso, ya que el enlace podría tener una cadena de consulta o un fragmento hash, por ejemplo, con un código de seguimiento UTM o un número de página, en cuyo caso esos enlaces no coincidirían. De hecho, dependiendo de su aplicación, este podría ser el caso de la mayoría de los enlaces.

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

Si desea asegurarse de que su regla también se aplique en esos casos, puede hacer coincidir .pdfcualquier parte del atributo utilizando

a[href*='.pdf']

Sin embargo, esto coincidirá con algunas cosas poco probables pero no deseadas, como un subdominio our.pdf.domain.com/a-page. Pero podemos reducirlo aún más, ya que sabemos que solo lo usaríamos para coincidir con archivos PDF que tengan una cadena de consulta o un fragmento hash. Si combinamos los 3 casos deberíamos coincidir con todos los enlaces PDF.

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

— inwerpsel
fuente