What CSS selectors do you know?

• Universal selector (*) - selects all elements.
• Type selector (element) - selects elements of a given type.
• Class selector (.class) - selects elements with a given class.
• ID selector (#id) - selects an element with a specific ID.
• Attribute selector ([attribute], [attribute="value"], [attribute~="value"], [attribute|="value"], [attribute^="value"], [attribute$="value"], [attribute*="value"]) - selects elements based on the presence or value of an attribute.
• Pseudo-classes (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selector)) - select elements in a specific state or position.
• Pseudo-elements (::before, ::after, ::first-line, ::first-letter, ::selection) - select parts of an element.
• Combinators:
  • Descendant selector (selector selector) - selects descendant elements of the first selector.
  • Child selector (selector > selector) - selects direct children of the first selector.
  • Adjacent sibling selector (selector + selector) - selects the element that is the immediate sibling (next) of the first selector.
  • General sibling selector (selector ~ selector) - selects all elements that are siblings (following) of the first selector.

Examples:

/* Universal selector */
* {
  margin: 0;
  padding: 0;
}

/* Type selector */
p {
  line-height: 1.5;
}

/* Class selector */
.highlight {
  color: yellow;
}

/* ID selector */
#main-header {
  font-size: 2em;
}

/* Attribute selector */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Pseudo-class */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Pseudo-element */
p::first-letter {
  font-weight: bold;
}

/* Combinators */
div p {
  margin-bottom: 10px; /* Paragraphs inside div */
}
ul > li {
  list-style: none; /* Direct children li inside ul */
}
h2 + p {
  margin-top: 5px; /* Paragraph immediately after h2 */
}
h3 ~ p {
  color: gray; /* All paragraphs after h3 */
}