Me.css v4 beta + sass Variables, Mixins and conditionals xxl optional xxxl optional Optional mixins Optional media query styles...
Selectores de atributo en CSS3
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:
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>
Quizás te interese ...
Google Fonts se ha convertido es una herramienta de referencia para los diseñadores web, pero por cada fuente que agregamos a nuestro sitio...
me.css v4 beta ya disponible! https://didesweb.com/css/me-css-sass/ 35.4kb unminified Me.css es una librería css basada en Emmet muy...
CSS3 nos aporta entre otras novedades la propiedad gradient, que nos permite mostrar transiciones suaves entre dos o más colores. Antes,...
Valoraciones
Sé el primero en valorar