How To Use attribute values in CSS

Question

Look There:

a[target="_blank"]{
        color: red;
    }

<a target="_blank">Im Red</a>
<br>
<a>Im Normal</a>

Its Correct But Can I Have ATTRIBUTE VALUE?

Like This:

*[colorAttrib]{
        color:/* value of colorAttrib */;
    }

<p colorAttrib="red">I Want To Be Red</p>
<p colorAttrib="blue">I Want To Be Blue</p>

That the FIRST paragraph is RED and the SECOND paragraph is BLUE.

You can use [`data-*`](https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/) for that. — Hazel へいぜる, Mar 20 '20 at 17:23

Hazel へいぜる · Answer 1 · 2020-03-20T18:06:37.850

1

I would recommend using data attributes for this particular task. W3 Schools has an excellent overview of what they are, how they work, and what kind of support they have.

The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

*[data-color='red'] { color: red; }
*[data-color='blue'] { color: blue; }

<p data-color="red">I am red.</p>
<p data-color="blue">I am blue.</p>

With regards to your comment:

But How About When I Have 1000 Values?!

Your limit is really your imagination here. For example, I'll expand this out:

*[data-color='red'] { color: red; }
*[data-color='blue'] { color: blue; }
*[data-color='green'] { color: green; }
*[data-color='normal'] { color: black; }
*[data-color='gradient'] {
  background: #1CB5E0;
 background: -webkit-linear-gradient(to bottom, #000046, #1CB5E0);
 background: linear-gradient(to bottom, #0000aa, #1CB5E0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
*[data-color='poly'] { color: #f95; }
*[data-color='asq93'] { color: #a5c; }

<p data-color="red">I am red.</p>
<p data-color="blue">I am blue.</p>
<p data-color="green">I am green.</p>
<p data-color="normal">I am normal.</p>
<p data-color="gradient">I am gradient.</p>
<p data-color="poly">I am poly.</p>
<p data-color="asq93">I am asq93.</p>

edited Mar 20 '20 at 18:06

answered Mar 20 '20 at 17:26

Hazel へいぜる

2,751
1
12
44

OK, I Can Do It While I Have Only Blue And Red; – M.H Sarmadi Mar 20 '20 at 17:31
But How About When I Have 1000 Values?! – M.H Sarmadi Mar 20 '20 at 17:32
There's really no limit on how many you can do, I'll reflect that in my answer. – Hazel へいぜる Mar 20 '20 at 17:32
So when I have 1000 different values, if I want to write a single line of code for each of them, the CSS file size will increase a lot! – M.H Sarmadi Mar 20 '20 at 17:38
@M.HSarmadi that's correct, but a different issue altogether. – Hazel へいぜる Mar 20 '20 at 17:48
1

Eventually, you should be able to use the `attr()` function, [but don't hold your breath](https://stackoverflow.com/a/8769922/215552) as it hasn't gotten anywhere in years. – Heretic Monkey Mar 20 '20 at 17:49

How To Use attribute values in CSS

1 Answers1