Қандай CSS селекторларын білесіз?

• Жалпылама селектор (*) - барлық элементтерді таңдайды.
• Тype селекторы (элемент) - берілген типтегі элементтерді таңдайды.
• Класс селекторы (.класс) - берілген класы бар элементтерді таңдайды.
• Идентификатор селекторы (#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;
}

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

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

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

/* Атрибут селекторы */
[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; /* ul ішіндегі тікелей ұрпақтар */
}
h2 + p {
  margin-top: 5px; /* h2-ден кейінгі параграф */
}
h3 ~ p {
  color: gray; /* h3-ден кейінгі барлық параграфтар */
}