Selector de CSS por atributo de estilo en línea

114

¿Existe un selector de CSS para seleccionar este elemento por su valor de atributo de estilo en línea?

<div style='display:block'>...</div>

algo como

div[cssAttribute=cssValue]
html css css-selectors inline-styles Esencia eterna
fuente

Respuestas:

191

El styleatributo en línea no es diferente de cualquier otro atributo HTML y se puede combinar con un selector de atributo de subcadena:

div[style*="display:block"]

Sin embargo, es por esta misma razón que es extremadamente frágil . Como los selectores de atributos no admiten expresiones regulares, solo puede realizar coincidencias exactas de subcadenas del valor del atributo. Por ejemplo, si tiene un espacio en algún lugar del valor del atributo, así:

<div style='display: block'>...</div>

No coincidirá hasta que cambie su selector para acomodar el espacio. Y luego dejará de hacer coincidir los valores que no contienen el espacio, a menos que incluya todas las permutaciones, ad nauseum. Pero si está trabajando con un documento en el que es poco probable que las declaraciones de estilo en línea cambien en absoluto, debería estar bien.

Tenga en cuenta también que esto no significa en absoluto seleccionar elementos por sus valores reales especificados, calculados o usados ​​como se refleja en el DOM. Eso no es posible con los selectores de CSS.

BoltClock
fuente
1
Incluso si es necesario, lástima, no hay una solución real para esto.
BoltClock
si pudiera decirnos por qué necesita hacer esto, entonces probablemente podamos ayudar más
corroído
9
Les daré un ejemplo de cuando esto es útil. Estoy escribiendo una prueba de Selenium Web Driver y no puedo / no me gustaría alterar el código real en la prueba. Necesito identificar un autocompletado específico (hay varios ocultos) por visualización de estilo, ya que el código no proporciona una identificación única o una estructura principal; se presume que se vuelcan a <body> en la devolución de llamada. Pero sí, es frágil como usted señala.
andersand
2
He encontrado que es EXTREMADAMENTE REQUERIDO si usas la barra de traducción de Google en tu página, ya que agrega un div fijo en la parte superior de nuestra página, y nuestra navegación ya está arreglada. Esta técnica nos permite mover nuestra barra de navegación dependiendo de si la barra de traducción está visible o no. La barra de traducción tiene clases estáticas y lo único que cambia es su estilo de visualización.
Jag
3
@andersand: Después de suficientes comentarios sobre mi respuesta, finalmente pude actualizarla. No había pensado en Selenium al escribir mi respuesta original y estoy de acuerdo en que es uno de los casos de uso más destacados para los selectores de atributos de estilo en línea.
BoltClock
3

Incluyendo ";" funciona mejor para mí.

div[style*="display:block;"]
Bertrand
fuente
4
Esto se debe a que el atributo styledebe coincidir exactamente con la propiedad HTML
RousseauAlexandre
@RousseauAlexandre Añadiendo ";" para el selector no hace ninguna diferencia al menos cuando probé un elemento con ";" en él y no en el selector. Siempre que los caracteres y los espacios sean los mismos, no es necesario incluirlos ;.
Maxie Berkmann