Working with data attributes in CSS
We previously looked at using data attributes in JavaScript. These data attributes are a fantastic way to store little bits of information on an element without using custom attributes.
However, we can also use them to style some aspects with specific attribute sets.
CSS attributes in CSS
To paint a simple picture, let’s create elements that hold a specific value like this.
|
1 2 3 |
<span class="nt"><div</span> <span class="na">data-rating=</span><span class="s">"1"</span><span class="nt">></span>Rating<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">data-rating=</span><span class="s">"5"</span><span class="nt">></span>Rating<span class="nt"></div></span> |
As you can see, our rating is only set as the custom attribute.
Let’s first look at how we can style this object, which is very easy by simply using its name.
|
1 2 3 |
<span class="o">[</span><span class="nt">data-rating</span><span class="o">]</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">indigo</span><span class="p">;</span> <span class="p">}</span> |
With this, the rating text will be purple.
We can also make it more specific and add styling for particular values.
|
1 2 3 4 5 |
<span class="o">[</span><span class="nt">data-rating</span><span class="o">=</span><span class="s2">'1'</span><span class="o">]</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="o">[</span><span class="nt">data-rating</span><span class="o">=</span><span class="s2">'5'</span><span class="o">]</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">indigo</span><span class="p">;</span> <span class="p">}</span> |
And to top it off, we can inject the value with CSS!
|
1 2 3 |
<span class="o">[</span><span class="nt">data-rating</span><span class="o">]</span><span class="nd">::after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="n">attr</span><span class="p">(</span><span class="n">data-rating</span><span class="p">);</span> <span class="p">}</span> |
Which would result in the rating being added after our text.
You can play with these data attributes on the following CodePen.
Thank you for reading, and let’s connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Source: https://dev.to/dailydevtips1/working-with-data-attributes-in-css-280l
