See Attribute selectors in the docs.

Attribute is set

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

Disabled buttons.

button[disabled] {
}

Required fields.

input[required] {
}

All divs with a lang attribute are bold.

div[lang] {
  font-weight: bold;
}

All divs without a lang attribute are italicized.

div:not([lang]) {
  font-style: italic;
}

Text match

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

Forms

From W3 Schools.

  • input[type=text] - will only select text fields
  • input[type=password] - will only select password fields
  • input[type=number] - will only select number fields

e.g.

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Incease the size of a search input on focus.

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}