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>
Supongo que es posible porque, de forma predeterminada, cursor: pointerparece aplicarse a cualquier <a>etiqueta que tenga un valor para su hrefatributo.
css
css-selectors
Marty
fuente
fuente
emptya[rel]:not( [rel=""] )nottruco termina siendo no dinámico. Intenté hacer esto para resaltar losinputcampos cuando tenían valores en lugar de cuando no tenían valores, y parece que una vez que se carga la página, el estilo no se vuelve a evaluar si se escribe un valor (o cuando está allí para empezar y se quita).Sí, en los selectores de CSS 3 hay varios selectores de atributos .
P.ej
fuente
Debería agregar que si un navegador establece un atributo de forma predeterminada, es posible que deba solucionarlo. Esto no parece ser un problema en los brosers "modernos", sin embargo, es un problema que he visto, así que asegúrese de verificar el rendimiento de varios navegadores.
Por ejemplo, descubrí que en IE antes de 9, colSpan está configurado para todos los TD en una tabla, por lo que cualquier celda tiene el valor de colspan oculto de 1.
Entonces, si estaba apuntando a "cualquier TD con atributo colspan" que aplique en su webdoc, incluso los td que no tengan ningún conjunto de atributos colspan, como cualquier TD que sea una sola celda, recibirán el estilo css. ¡IE menos de 9 básicamente les dará estilo a todos!
La única razón para preocuparse por esto son todos los usuarios de XP restantes que no pueden actualizar por encima de IE8.
Entonces, por ejemplo, tengo un grupo de tablas donde el contenido puede cambiar de un extremo a otro, dejando entre 1 y 7 celdas en blanco al final o al principio.
Quiero aplicar un color a cualquier celda en blanco al final o al principio utilizando el atributo colspan. Usar lo siguiente no funcionará en IE menos de 9
#my td[colspan] {background-color:blue;}... todos los TD se diseñarán (gracioso ya que el estilo de atributo condicional era supuestamente superior en IE, pero estoy divagando ...).
El uso de lo siguiente funciona en todos los navegadores cuando configuro el valor de colspan en 'single' para cualquier celda solitaria / TD que desee incluir en el esquema de estilo, sin embargo, es un 'truco' y no validará correctamente ...
#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 apropiada usando estilo condicional usando "if lt IE 9" para anular. Sería la forma 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 forma correcta de hacerlo es con hojas de estilo selectivas.
La mayoría de nosotros ya lo hacemos de todos modos, pero de todos modos, todavía hace bien en considerar y probar si un navegador aplica un atributo automático cuando no ve ninguno, y cómo puede manejar su sintaxis de otra manera correcta para aplicar estilos a los valores de los atributos.
(Por cierto, resulta que colspan aún no está en la especificación css [a partir de css3], por lo que este ejemplo no arroja ningún error de validación).
fuente