Hansı CSS seçicilərini bilirsiniz?

• Ümumi seçici (*) - bütün elementləri seçir.
• Növ seçici (element) - müəyyən növ elementləri seçir.
• Sinif seçici (.sinif) - müəyyən sinfə malik elementləri seçir.
• İdentifikasiya seçici (#id) - müəyyən identifikatora malik elementləri seçir.
• Atribut seçici ([atribut], [atribut="dəyər"], [atribut~="dəyər"], [atribut|="dəyər"], [atribut^="dəyər"], [atribut$="dəyər"], [atribut*="dəyər"]) - atributun mövcudluğu və ya dəyərinə əsasən elementləri seçir.
• Pseudo-siniflər (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(seçici)) - müəyyən vəziyyət və ya mövqedə olan elementləri seçir.
• Pseudo-elementlər (::before, ::after, ::first-line, ::first-letter, ::selection) - elementin hissələrini seçir.
• Birleştiricilər:
  • Nəsil seçici (seçici seçici) - ilk seçicinin nəsil elementlərini seçir.
  • Birbaşa uşaq seçici (seçici > seçici) - ilk seçicinin birbaşa uşaqlarını seçir.
  • Yaxın qardaş seçici (seçici + seçici) - ilk seçicinin dərhal ardınca gələn qardaş elementini seçir.
  • Ümumi qardaş seçici (seçici ~ seçici) - ilk seçicinin bütün qardaşlarını seçir.

Nümunələr:

/* Ümumi seçici */
* {
  margin: 0;
  padding: 0;
}

/* Növ seçici */
p {
  line-height: 1.5;
}

/* Sinif seçici */
.highlight {
  color: yellow;
}

/* İdentifikasiya seçici */
#main-header {
  font-size: 2em;
}

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

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

/* Pseudo-element */

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

/* Birleştiricilər */
div p {
  margin-bottom: 10px; /* Div daxilində paraqraflar */
}
ul > li {
  list-style: none; /* ul daxilində birbaşa li uşaqları */
}
h2 + p {
  margin-top: 5px; /* H2-dən dərhal sonra gələn paraqraf */
}
h3 ~ p {
  color: gray; /* H3-dən sonra gələn bütün paraqraflar */
}