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;
}

External Link for target data attribute with css

Other Items in css
Page Views

This page has been viewed 311 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.

âĪðŸ‘Đ‍ðŸ’ŧðŸ•đ

Random Quote
All of humanity's problems stem from man's inability to sit quietly in a room alone, wrote Blaise Pascal.
Unknown