target data attribute with css

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

View CodePad Test Code for target data attribute with css

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

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.

❤👩‍💻🕹