¿Cómo me dirijo a elementos con un atributo que tenga algún valor en CSS?
Sé que puedo apuntar a elementos que tienen un atributo específico en CSS, por ejemplo:
input[type=text]
{
font-family: Consolas;
}
Pero, ¿es posible apuntar a elementos que tienen un atributo de cualquier valor (excepto nada, es decir, cuando el atributo no se ha agregado al elemento)?
Aproximadamente algo como:
a[rel=*]
{
color: red;
}
Que debería apuntar a la primera y tercera <a> etiquetas en este HTML:
<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>
Me imagino que es posible porque por defecto, cursor: pointer parece aplicarse a cualquier <a> etiqueta que tiene un valor para su atributo href.
3 answers
Lo siguiente coincidirá con cualquier anchor con un atributo rel definido:
a[rel]
{
color: red;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-14 03:49:32
Sí en los selectores CSS 3 hay varios selectores de atributos.
P. Ej.
[att] Representa un elemento con el atributo att, cualquiera que sea el valor del atributo.
[att = val] Representa un elemento con el atributo att cuyo valor es exactamente "val".
[att~ = val] Representa un elemento con el atributo att cuyo valor es una lista de palabras separadas por espacios en blanco, una de las cuales es exactamente "val". Si "val" contiene espacios en blanco, nunca representará nada (ya que el las palabras están separadas por espacios). También si "val" es la cadena vacía, nunca representará nada.
[att^ = val] Representa un elemento con el atributo att cuyo valor comienza con el prefijo "val". Si " val " es la cadena vacía entonces el selector no representa nada.
[att$=val] Representa un elemento con el atributo att cuya valor termina con el sufijo "val". Si " val " es la cadena vacía, entonces el selector lo hace no representa nada.
[att* = val] Representa un elemento con el atributo att cuyo valor contiene al menos una instancia de la subcadena "val". Si "val" es el vacío string entonces el selector no representa nada.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-14 03:51:18
Debe agregar que si un navegador establece un atributo por defecto, es posible que deba evitar. Esto no parece ser un problema en los brosers "modernos", sin embargo, este es un problema que he visto, así que asegúrese de comprobar el rendimiento entre navegadores.
Por ejemplo, descubrí que en IE antes de 9, colSpan se establece para todos los TD en una Tabla, por lo que cualquier celda tiene el valor colspan oculto de 1.
Así que si estabas apuntando a "cualquier TD con atributo colspan" aplicas en tu webdoc, incluso el td que no tenga un conjunto de atributos colspan, como cualquier TD que sea una sola celda, recibirá el estilo css. ES decir, menos de 9 básicamente estilo de todos ellos!
La única razón para preocuparse por esto es todos los usuarios de XP restantes que no pueden actualizar por encima de IE8.
Así que, por ejemplo, tengo un grupo de tablas donde el contenido puede cambiar de extremo a extremo, dejando en cualquier lugar de 1 a 7 celdas en blanco, ya sea al final o al principio.
Quiero aplicar un color a cualquier celda en blanco en el final o el principio, utilizando el atributo colspan. El uso de lo siguiente no funcionará en IE menos de 9
#my td[colspan] {background-color:blue;}
...todos los TD obtendrán estilo (divertido ya que el atributo condicional estilo era supuestamente superior en IE, pero estoy divagando...).
El uso de lo siguiente funciona en todos los navegadores cuando establezco el valor de colspan en 'single' para cualquier celda solitaria / TD que desee incluir en el esquema de estilo, sin embargo, es un 'hack' y no lo hará correctamente validar...
#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}
Alternativamente, debería poder abordar el problema de manera más adecuada utilizando el estilo condicional utilizando "if lt IE 9" para anular. Sería la manera correcta de hacer esto, solo tenga en cuenta que debe ocultar el "css correctamente construido" de IElt9 en el proceso, y creo que la única manera adecuada de hacerlo es con hojas de estilo selectivas.
La mayoría de nosotros ya lo hacemos de todos modos, pero a pesar de todo, todavía hace bien en considerar y probar si un navegador aplica un auto-atributo cuando no ve ninguno, y cómo puede manejar su sintaxis de otra manera corect para el estilo en los valores de atributo.
(por cierto, colspan no está todavía en la especificación css [a partir de css3], por lo que este ejemplo no arroja ningún error de validación.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-04 21:45:09