Кандай 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;
}

/* Атрибут тандоо */
[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дан кийинки бардык параграфтар */
}