Jighead
6/9/2018 - 6:32 PM

Target data-attribute selectors

We can create a data-info attribute, which can receive a space-separated list of anything we need to make note of. In this case, we'll make note of external links and links to images -- just for the example.

Click Me, Fool

With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

dataattributeselector
content_copyfile_download

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}
 
/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}