CSS Styling with Custom Attributes
Here, we can use attribute selectors to style the background color of the element.
Example: This example will set the background colors of the elements using the CSS.
HTML
<!DOCTYPE html><html><head> <title>Page Title</title> <link rel="stylesheet" href="styles.css"></head><body> <h2>Welcome To GFG</h2> <p data-about="blog">Informational text entries</p> <p data-info="blogathon">Blogathon 2021</p></body></html> |
CSS
p[data-about='blog'] { background-color: #C2F784;}p[data-info='blogathon'] { background-color: #DF2E2E;} |
Output:
CSS Styling with Custom Attributes Example output
What are custom attributes in HTML5 ?
Custom attributes are attributes that are not part of the standard HTML5 attributes but are explicitly created. They allow us to add our information to HTML tags. These attributes store private information specific to a page or application, providing a way to add custom data to HTML elements
Any attribute whose name starts with data- is a custom attribute. The data-* attributes allow us to embed custom attributes on all HTML elements. These are completely ignored by the user. The data stored can be used in JavaScript of the page. We can also use these data attributes to style our elements.
Syntax:
<element data-*="value">