data-attributes

Reference

HTML5 allows us to create our own attributes for an HTML element using the data prefix.

<!-- data-attributeName -->

<div data-school="Lambda" class="school"></div>

Once we create the attribute, we can style it using CSS

div[data-school='Lambda']{
    /* CSS Style rules here */
  }

In javascript, however, we have to use the .dataset property to access our custom attribute as an object. Once we do that we can use standard object notation

  const school = document.querySelector('.school');
  const schoolName = school.dataset.school;
  console.log(schoolName); //Lambda

We can also use the data attribute in a CSS style selector used in querySelector

const schoolElement = document.querySelector("div[data-school='Lambda']");