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-* for that.

Taco
– Taco

2020-03-20 17:23:08 +00:00
Commented Mar 20, 2020 at 17:23 — Taco
– Taco, Commented Mar 20, 2020 at 17:23
Sure, I say some examples...

M.H Sarmadi
– M.H Sarmadi

2020-03-20 17:33:09 +00:00
Commented Mar 20, 2020 at 17:33 — M.H Sarmadi
– M.H Sarmadi, Commented Mar 20, 2020 at 17:33

Taco · Accepted Answer · 2020-03-20 18:06:37Z

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, 2020 at 18:06

answered Mar 20, 2020 at 17:26

Taco

2,9531 gold badge20 silver badges55 bronze badges

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

6 Comments

M.H Sarmadi Over a year ago

OK, I Can Do It While I Have Only Blue And Red;

M.H Sarmadi Over a year ago

But How About When I Have 1000 Values?!

Taco Over a year ago

There's really no limit on how many you can do, I'll reflect that in my answer.

M.H Sarmadi Over a year ago

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!

Heretic Monkey Over a year ago

Eventually, you should be able to use the attr() function, but don't hold your breath as it hasn't gotten anywhere in years.

|

Collectives™ on Stack Overflow

How To Use attribute values in CSS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related