Seletor CSS por atributo de estilo embutido

114

Existe um seletor CSS para selecionar este elemento por seu valor de atributo de estilo embutido?

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

algo como

div[cssAttribute=cssValue]
html css css-selectors inline-styles AgelessEssence
fonte

Respostas:

191

O styleatributo inline não é diferente de nenhum outro atributo HTML e pode ser correspondido com um seletor de atributo substring:

div[style*="display:block"]

É por isso mesmo que é extremamente frágil . Como os seletores de atributo não oferecem suporte a expressões regulares, você só pode realizar correspondências exatas de substring do valor do atributo. Por exemplo, se você tiver um espaço em algum lugar no valor do atributo, como este:

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

Não corresponderá até que você altere seu seletor para acomodar o espaço. E então ele irá parar de combinar valores que não contêm o espaço, a menos que você inclua todas as permutações, ad nauseum. Mas se você estiver trabalhando com um documento no qual as próprias declarações de estilo inline provavelmente não sofrerão alterações, você não terá problemas.

Observe também que isso não significa selecionar elementos por seus valores reais especificados, calculados ou usados, conforme refletido no DOM. Isso não é possível com seletores CSS.

BoltClock
fonte
1
Mesmo que seja necessário, uma pena, não há uma solução real para isso.
BoltClock
se você pudesse nos dizer por que você precisa fazer isso, então provavelmente podemos ajudar mais
corroído
9
Vou dar um exemplo de quando isso é útil. Estou escrevendo um teste de driver da Web Selenium e não posso / não gostaria de alterar o código real no teste. Preciso identificar um preenchimento automático específico (existem vários ocultos) por exibição de estilo, pois o código não fornece ids exclusivos ou estrutura pai - eles são despejados em <body> no retorno de chamada, presumivelmente. Mas sim, é frágil como você apontou.
andersand
2
Descobri que é EXTREMAMENTE NECESSÁRIO se usar a barra de tradução do google em sua página, pois adiciona um div fixo ao topo da página - e nosso nav já está fixo. Esta técnica nos permite mover nossa barra de navegação dependendo se a barra de tradução está visível ou não. A barra de tradução tem classes estáticas e a única coisa que muda é seu estilo de exibição.
Jag de
3
@andersand: Depois de comentários suficientes sobre minha resposta, finalmente consegui atualizá-la. Eu não tinha pensado no Selenium ao escrever minha resposta original e concordo que é um dos casos de uso mais proeminentes para seletores de atributo de estilo embutido.
BoltClock
3

Incluindo ";" funciona melhor para mim.

div[style*="display:block;"]
Bertrand
fonte
4
Isso ocorre porque o atributo styledeve corresponder exatamente à propriedade HTML
RousseauAlexandre
@RousseauAlexandre Adicionando ";" para o seletor não faz diferença, pelo menos quando experimentei um elemento com ";" nele e não no seletor. Desde que os caracteres e espaços sejam iguais, não é necessário incluí-los ;.
Maxie Berkmann