Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS selector by inline style attribute

People also ask

What is inline selector in CSS?

Inline CSS is the technique to define the single element with the insert style sheets in an HTML document. We can add CSS in three approaches: Inline, Internal, and External. It has the interactive and unique style to create a single HTML element; we can define the inline CSS on the style attribute.

Do inline styles always use a selector?

It depends. Are you only interested in the presence of the inline style attribute, or do you need to select by a specific inline style? Selecting by just merely having the attribute is easy and reliable, but having a specific inline style... not so much, unless you can control the markup.

How do you target a style tag in CSS?

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

How can we select elements with a specified attribute in CSS?

The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-). Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".


The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector:

div[style*="display:block"]

It is for this very reason however that it's extremely fragile. As attribute selectors don't support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you have a space somewhere in the attribute value, like this:

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

It won't match until you change your selector to accommodate the space. And then it will stop matching values that don't contain the space, unless you include all the permutations, ad nauseam. But if you're working with a document in which the inline style declarations themselves are unlikely to change at all, you should be fine.

Note also that this is not at all selecting elements by their actual specified, computed or used values as reflected in the DOM. That is not possible with CSS selectors.


Including ";" works better for me.

div[style*="display:block;"]