Working with data attributes in CSS

Read Time:1 Minute, 5 Second

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.

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

With this, the rating text will be purple.

We can also make it more specific and add styling for particular values.

Enter fullscreen mode Exit fullscreen mode

And to top it off, we can inject the value with CSS!

Enter fullscreen mode Exit fullscreen mode

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

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
Web resource caching: Server-side Previous post Web resource caching: Server-side
I Automated Daily Standups for Developers Next post I Automated Daily Standups for Developers

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.