TIL About CSS Attribute Selectors and Square Brackets in HTML

You can use CSS attribute selectors to target HTML elements.

Let’s say you have this HTML snippet:

<img alt="myPicName" src="/" /> <img alt="anotherPicName" src="/" />

You can style the first image by targeting the alt attribute and without changing the second image element.

img[alt='myPicName'] {
  width: 100px;
}

When you use square brackets in HTML, it means something different: you group classes with square brackets. The brackets have no meaning, they are used for clarity.

<div class="[ foo  foo--bar ]  baz">

TIL About CSS Attribute Selectors and Square Brackets in HTML

Further Reading