Custom Data Attributes

Attribute selectors target HTML elements based on an attribute and value. For example, the following targets all <label> elements with a title attribute:

label[title] {
  color: indigo;
}

HTML provides custom data- attributes that allow you to store extra information on any element. Data attributes are regular HTML attributes that begin with the data- prefix follow...