Кои CSS селектори знаете?

• Универсален селектор (*) - избира всички елементи.
• Селектор на тип (елемент) - избира елементи от даден тип.
• Селектор на клас (.клас) - избира елементи с даден клас.
• Селектор на идентификатор (#id) - избира елемент с даден идентификатор.
• Атрибутен селектор ([атрибут], [атрибут="стойност"], [атрибут~="стойност"], [атрибут|="стойност"], [атрибут^="стойност"], [атрибут$="стойност"], [атрибут*="стойност"]) - избира елементи въз основа на наличието или стойността на атрибута.
• Псевдокласове (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(селектор)) - избират елементи в определено състояние или позиция.
• Псевдоелементи (::before, ::after, ::first-line, ::first-letter, ::selection) - избират части от елемент.
• Комбинатори:
  • Потомък (селектор селектор) - избира потомците на първия селектор.
  • Пряк потомък (селектор > селектор) - избира директните потомци на първия селектор.
  • Съседен брат (селектор + селектор) - избира елемента, който е непосредствен брат (следващ) на първия селектор.
  • Общ брат (селектор ~ селектор) - избира всички елементи, които са братя (следващи) на първия селектор.

Примери:

/* Универсален селектор */
* {
  margin: 0;
  padding: 0;
}

/* Тип селектор */
p {
  line-height: 1.5;
}

/* Клас селектор */
.highlight {
  color: yellow;
}

/* Идентификатор селектор */
#main-header {
  font-size: 2em;
}

/* Аtributен селектор */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Псевдоклас */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Псевдоелемент */

p::first-letter {
  font-weight: bold;
}

/* Комбинатори */
div p {
  margin-bottom: 10px; /* Абзаци вътре в div */
}
ul > li {
  list-style: none; /* Директни деца на li вътре в ul */
}
h2 + p {
  margin-top: 5px; /* Абзац, който следва непосредствено след h2 */
}
h3 ~ p {
  color: gray; /* Всички абзаци след h3 */
}