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