Qaysi CSS selektorlarini bilasiz?

• Universal selektor (*) - barcha elementlarni tanlaydi.
• Turi selektori (element) - ma'lum bir turdagi elementlarni tanlaydi.
• Sinf selektori (.sinf) - ma'lum bir sinfga ega elementlarni tanlaydi.
• Identifikator selektori (#id) - ma'lum bir identifikatorga ega elementni tanlaydi.
• Atribut selektori ([atribut], [atribut="qiymat"], [atribut~="qiymat"], [atribut|="qiymat"], [atribut^="qiymat"], [atribut$="qiymat"], [atribut*="qiymat"]) - atributning mavjudligi yoki qiymatiga asoslangan elementlarni tanlaydi.
• Pseudo-sinflar (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektor)) - ma'lum holat yoki pozitsiyadagi elementlarni tanlaydi.
• Pseudo-elemntlar (::before, ::after, ::first-line, ::first-letter, ::selection) - elementning qismlarini tanlaydi.
• Kombinatorlar:
  • Voris selektori (selektor selektor) - birinchi selektorning vorislarini tanlaydi.
  • To'g'ridan-to'g'ri voris selektori (selektor > selektor) - birinchi selektorning to'g'ridan-to'g'ri vorislarini tanlaydi.
  • Yaqin birodar selektori (selektor + selektor) - birinchi selektorning darhol keyingi birodar elementini tanlaydi.
  • Umumiy birodar selektori (selektor ~ selektor) - birinchi selektorning barcha birodarlarini tanlaydi.

Misollar:

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

/* Turi selektori */
p {
  line-height: 1.5;
}

/* Sinf selektori */
.highlight {
  color: yellow;
}

/* Identifikator selektori */
#main-header {
  font-size: 2em;
}

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

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

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

/* Kombinatorlar */
div p {
  margin-bottom: 10px; /* Div ichidagi paragraflar */
}
ul > li {
  list-style: none; /* Ul ichidagi to'g'ridan-to'g'ri li bolalar */
}
h2 + p {
  margin-top: 5px; /* H2 dan darhol keyingi paragraf */
}
h3 ~ p {
  color: gray; /* H3 dan keyingi barcha paragraflar */
}