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 {}