Selectores de atributo en CSS3

13 de /febrero02 de /2014
2m 54s
css
0 comentarios
1736

CSS3 incorpora nuevas formas de referenciar un elemento concreto, con el nuevo selector de atributo podemos referenciar un elemento a través de sus atributos, este nuevo método para referenciar elementos no solo es capaz de encontrar un elemento con un atributo en concreto, además podemos pasarle el valor del atributo, quedará más claro con el ejemplo que te muestro a continuación:

div[name=”parrafo30421″]{color: red;}

Referencia el elemento <div> con un atributo “name” cuyo valor es “parrafo30421”
No es necesario pasarle el valor del atributo, podemos referenciar por ejemplo uno o más elementos <img> con un atributo “title”, y ponerle un borde, solo el elemento o elementos <img> con un atributo “title” tendrán ese borde y no afectará al resto de elementos <img>

img[title]{border: 3px solid #777777;}

Referenciar de forma más avanzada

¿Conoces las expresiones regulares en PHP o JS?
Si conoces estas expresiones y has trabajado con ellas en otros entornos de programación, te resultarán familiares los siguientes selectores:

Selector “^”

Referencia cualquier elemento <div> que tiene un atributo, con un valor que comienza por el valor asignado, al asignarle el valor “pa”, referenciará el elemento <div> con valor “parrafo30421”, que comienza por “pa”

div[name^=”pa”]{color: red;}

Resultado:

parrafo30421

Selector “$”

Referencia cualquier elemento <div> que tiene un atributo, con un valor que finaliza por el valor asignado, al asignarle el valor “421”, referenciará el elemento <div> con valor “parrafo30421”, que finaliza por “421”

div[name$=”421″]{color: red;}

Resultado:

parrafo30421

Selector “*”

Referencia cualquier elemento <div> que tiene un atributo, con un valor que contiene el valor asignado, sea cual sea su posición, al asignarle el valor “fo30”, referenciará el elemento <div> con valor “parrafo30421”, que contiene el contexto “fo30″ en su valor

div[name*=”fo30”]{color: red;}

Resultado:

parrafo30421

Selector “~”

Referencia cualquier elemento <div> que tiene un atributo class con un valor que contiene el valor asignado en una lista de valores separados por espacios en blanco, por ejemplo si tenemos un elemento <div> con más de un valor en el atributo class, podemos referenciarlo pasandole uno de los valores

div[class~=”clase2″]{color: red;}

Resultado:

<div class=”clase1 clase2 clase3″></div>

Selector “|”

Referencia cualquier elemento <div> que tiene como primer valor de un atributo ID el valor asignado en una lista de valores separados por guiones

div[id|=”identificador1″]{color: red;}

Resultado:

<div id=”identificador1-identificador2-identificador3″><div>

Valoraciones

Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies