The CSS attribute selector matches elements based on the presence or value of a given attribute.

/* <a> elements with a title attribute */
a[title] {}
 
/* <a> elements with an href matching "<https://example.org>" */
a[href="<https://example.org>"] {}
 
/* <a> elements with an href containing "example" */
a[href*="example"] {}
 
/* <a> elements with an href ending ".org" */
a[href$=".org"] {}
 
/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {}

The CSS class selector matches elements based on the contents of their class attribute.

/* All elements with class="spacious" */
.spacious {}
 
/* All <li> elements with class="spacious" */
li.spacious {}
 
/* All <li> elements with a class list that includes both "spacious" and "elegant" -- Ex. class="elegant retro spacious" */
li.spacious.elegant {}

The CSS ID selector matches an element based on the value of the element's id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector.

/* The element with id="demo" */
#demo {}

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

/* All <a> elements. */
a {}
 
/* All <div> elements. */
div {}

The CSS universal selector (*) matches elements of any type.

/* Selects all elements */
* {
  color: green;
}

A CSS pseudo-class is a keyword added to a selector that lets you select elements based on information that lies outside of the document tree, such as a specific state of the selected element(s). For example, the pseudo-class :hover can be used to style a button when a user's pointer hovers over it.

For more info, see CSS: Pseudo-classes.