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
fuente
element[attribute_name="attribute_value"]
.Respuestas:
Utilice $ después de su href. Esto hará que el valor del atributo coincida con el final de la cadena.
JSFiddle: http://jsfiddle.net/UG9ud/
fuente: http://www.w3.org/TR/selectors/
fuente
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.Si desea asegurarse de que su regla también se aplique en esos casos, puede hacer coincidir
.pdf
cualquier parte del atributo utilizandoSin 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.fuente