CSS Selector For Elements With Special Identity

CSS Selector For Elements With Special Identity - Actually this is just my name alone, I certainly do not know what the term for elements like this. Call it any HTML element of course have tags and others have multiple tags with value. Well we can make CSS to target certain elements in accordance with the tags it has.

This can be encountered when creating CSS for elements that have fluctuated tags, for which it needs proper CSS to match the changes of those elements. If we use CSS like this, then we can create a style according to the condition of the element. This can be implemented for show hide div or something like that.

The CSS selector we will learn will be useful when we provide styles to the elements that are injected by a script, eg for show hide or with other conditions. I'm sure, if you frequently tweaking the template code to modify the look of the blog, then one day you will find a condition that I mean this.

CSS Selector For Elements With Special Identity

Suppose in a div hidden with hidden as follows:

<div id="element" hidden>
This is an element with ID
</div>

Then we use javascript to display it as follows:

document.getElementById("element").style.display = "block";

Then the above div will be in inject style by javascript earlier so in browser will be like this.

<div id="element" hidden style="display: block;">
This is an element with ID
</div>

Well we will give CSS style to div element after in-inject by javascript.

1. Provide a style on a div that has a style attribute with the following CSS:

div#element[style] {
  color: red;
}

2. Provide a style on a div that has an attribute style="display: block;" with the following CSS:

div#element[style="display: block;"] {
  color: red;
}

3. Giving a style to a div that has a style attribute with last value block; with the following CSS:

div#element[style$="block;"] {
  color: red;
}

4. Provide a style on a div that has a style attribute with the first value display with the following CSS:

div#element[style^="display"] {
  color: red;
}

5. Giving a style to a div that has a style attribute with a value that contains the word display: or block; with the following CSS:

div#element[style~="display:"] {
  color: red;
}

Or

div#element[style~="block;"] {
  color: red;
}

6. Provide a style on a div that has a style attribute with a value that has a display word or block with the following CSS:

div#element[style*="display"] {
  color: red;
}

Or

div#element[style*="block"] {
  color: red;
}

Of course the above CSS-CSS just as an example, you have to adjust to the condition of the elements you meet.

A few articles I've tried to share about CSS Selector For Elements With Special Identity. Hopefully with this short enough article can be useful and useful for us all. Good luck.

Share :