Selector de atributos CSS3 que apunta al tipo de archivo

Este artículo es parte de nuestro "Serie de tutoriales HTML5 / CSS3" - Dedicado a ayudarlo a ser un mejor diseñador y / o desarrollador.. haga clic aquí Ver más artículos de la misma serie..

los selectores de atributos es una característica realmente útil para seleccionar un elemento sin agregar superfluo carné de identidad o clases. Mientras el elemento objetivo tenga un atributo como href, src y tipo no tenemos que hacerlo.

Los selectores de atributos en realidad han estado alrededor desde CSS 2.1, y ahora, con algunos tipos más de selectores de atributos agregados en las especificaciones de CSS3, podemos orientar el atributo del elemento aún más específicamente.

Y, en este post, vamos a utilizar una de las sintaxis para seleccionar la Tipo de archivo que se inserta como parte del valor del atributo.

La sintaxis y el soporte del navegador

los Tipo de archivo Siempre está al final del nombre del archivo. Entonces, para seleccionar eso Tipo de archivo Podemos utilizar la siguiente sintaxis. [attr $ = "valor"]. Esta sintaxis utiliza la $ = operador que apuntará al final del valor del atributo, por ejemplo:

 a [href $ = ". pdf"]: antes de background: url ('… /images/document-pdf-text.png') no-repetir;  

El fragmento anterior seleccionará todos los enlaces con los que el valor del atributo termina con .pdf e inserte un icono de documento de palabra en el :antes de pseudo-elemento.

Fuente de icono de PDF: Iconos de fuga

Si bien esta es una utilización común de este selector, seguramente podemos ir más allá de eso..

Respecto a la compatibilidad del navegador; Aunque esta sintaxis se introdujo oficialmente como la especificación CSS3, en realidad ha sido compatible desde Internet Explorer 7, Para que puedas aplicarlo de forma segura a través de todos tus diseños..

El ejemplo

Nunca lo sabrás si nunca lo intentas. Solo necesitamos probar algo nuevo para comprender mejor algo que aún no entendemos. Entonces, aquí vamos a demostrar cómo esta sintaxis puede ser muy útil y útil para apuntar a un elemento en una estructura HTML particular que solía ser un poco difícil de aplicar utilizando solo CSS simple..

A continuación, tenemos un Estructura HTML5 para enumerar tres imágenes con su título. Es solo para fines de demostración, su marca no tiene que ser exactamente como el siguiente fragmento de código (por ejemplo, puede tener solo una imagen o incluso tres imágenes más), pero el punto es que puede saber cómo se puede aplicar esta sintaxis. una estructura HTML particular.

Cada una de las imágenes enumeradas arriba tiene los siguientes formatos o extensiones, jpg, png, y gif. También tienen un título que representa su extensión de imagen; esta leyenda actuará como la etiqueta de la imagen.

Entonces, aquí está el plan, vamos a dar diferentes colores de fondo para el título de cada extensión de imagen diferente. La imagen JPG obtendrá un verde color del subtítulo, el PNG obtendrá azul, y por último el gif obtendrá púrpura.

Primero, establezcamos la posición de la etiqueta de la figura relativamente, porque vamos a aplicar absoluto posición para el título.

 figura posición: relativa;  

Añade un poco de decoración para las imágenes con bordes y sombras..

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Y luego, establecemos el estilo y la posición predeterminados para el título. La leyenda o etiqueta de la imagen tendrá un cuadrado de 50px.

 img + figcaption color: #fff; posición: absoluta; arriba: 0; derecha: 0; ancho: 50px; altura: 50px; altura de línea: 50px; text-align: center;  

Ahora es el momento de agregar el color de fondo. Para hacerlo, podemos combinar el selector de atributos con el selector de hermanos adyacente, +.

 img [src $ = ". jpg"] + figcaption background-color: # a8b700;  

El fragmento anterior apuntará a cada imagen con el atributo de origen que termina con .jpg, entonces el selector adyacente encontrará el elemento junto a él. En este caso el figcaption será agregado con el # a8b700 color de fondo.

Y aquí están todos los códigos para el resto de los formatos de imagen, .png y .gif.

 img [src $ = ". png"] + figcaption background-color: # 389abe;  img [src $ = ". gif"] + figcaption background-color: # 8960a7;  

Ahora, veamos cómo resulta en vivo desde el enlace de demostración a continuación, o puede descargar la fuente para examinarla sin conexión.

• Manifestación
• Descargar fuente

Las fuentes de imágenes son las siguientes: MacPro 1, MacPro 2 y MacPro 3

Conclusión

Esperamos que pueda ver el lado elegante del estilo con un selector especial, como lo que hemos intentado demostrar con el selector de atributos. Por lo tanto, la próxima vez que estilice su HTML, le recomendamos que investigue si su estilo se puede aplicar con un selector especial, en lugar de arruinar su marcado correctamente estructurado con más recursos. clases o carné de identidad.

En realidad, hay otros dos nuevos selectores de este tipo que cubriremos en las siguientes publicaciones, así que estad atentos..