πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Retrieve Attribute Values in CSS

How to Retrieve Attribute Values in CSS

Ferenc Almasi β€’ 2020 November 04 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

Use the attr() property in CSS if you want to retrieve the value of an element's attribute and use it in your stylesheets:

Copied to clipboard! Playground
<span data-icon="🌺" data-name="Hibiscus"></span>
<style>
    span::before {
        content: attr(data-name);
    }
</style>
attr.html

In the example above, the value of the attr() funcion will be "Hibiscus". You can also specify types to attr(), using the following way:

Copied to clipboard! Playground
.types {
    attr(data-src url);      /* Define type as url */
    attr(data-score number); /* Define type as number */
    attr(data-width px);     /* Define type as pixel */
}
types.css

By using a second parameter, you also have the ability to provide fallback values:

Copied to clipboard! Playground
.defaults {
    attr(data-src url, '');       /* Will fallback to an empty string */
    attr(data-width px, inherit); /* Will fallback to the inherited property */
    attr(data-name, 'Unknown');   /* Will fallback to "Unknown" */
}
defaults.css
How to retrieve attribute values in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.