target data attribute with css

you can add a data attribite and target it with css using the following demo

HTML

<div class='im-a-div' data-stuff="yellow"></div>
<div class='im-a-div' data-stuff="red"></div>
<div class='im-a-div' data-any-text="red"></div>

CSS

.im-a-div {
  height:50px;
  width:50px;
  border-radius:5px;
  margin-bottom:5px;
}
.im-a-div[data-stuff="yellow"] {
  background:#FE0;
}
.im-a-div[data-stuff="red"] {
  height:50px;
  width:50px;
  background:#F00;
}
.im-a-div[data-any-text="red"] {
  border:3px solid #F00;
}

Demo

External Link for target data attribute with css

Other Items in css
Page Views

This page has been viewed 92 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹