Today I learned about a CSS selector I have not used a great deal before - pipe-equals. The spec describes this operator as:

Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-“

This selector is particularly useful for loose matching of BEM CSS classes, and other dasherized class naming systems, for example:

[class|="icon"] {
  background: #656565;
}

.icon--small {
  width: 32px;
  height: 32px;
}

.icon--medium {
  width: 64px;
  height: 64px;
}

.icon--large {
  width: 128px;
  height: 128px;
}

For information: