CSS: Calling any element with same attribute

Viewed 111

Is there a way to call any element on a website with the same attribute? If I have the following elements for example:

<h1 example="true">Test</h1>
<p example="true">Test 2</p>

can I call them together? So without using the following -

h1[example="true"]{
    color: red;
}
p[example="true"]{
    color: red;
}

OR

h1[example="true"], p[example="true"]{
    color: red;
}

I just need a way to call EVERY element with that attribute being true.

1 Answers

You could do directly by specifying the CSS [attribute] Selector without any tag-name preceding it as follows -

[example="true"]{
  color:red;
}
<h1 example="true">Test</h1>
<p example="true">Test 2</p>

So, in the above example, every element having example attribute set to true will be selected by the CSS selector and the CSS styling will be applied to all of them.

We can use attribute selector like a[attr=value] or h[attr=value]. Consider the above code to be like - *[attr=value] which selects all elements having that attribute.

Related