CSS Selector to target Data attribute

Question

I have the following HTML line:

<div data-component-id="12345" class="component" data-component-status="operational">

Is it possible to use the data-component-id as a CSS Selector?

I would like to add a CSS code especially for this div, eg: {display: none}

It's called attribute selector: div[data-component-id="12345"] {} — demkovych
– demkovych, Commented Jan 23, 2020 at 13:53

Shiny · Accepted Answer · 2020-01-23 13:54:30Z

8

You can use the Attribute selector [] for this

div[data-component-id="12345"] {
  background-color: red;
}

<div data-component-id="12345" class="component" data-component-status="operational">
  Demo
</div>

answered Jan 23, 2020 at 13:54

Shiny

5,0953 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1