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

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies