Hangi CSS seçicilerini biliyorsunuz?

• Evrensel seçici (*) - tüm öğeleri seçer.
• Tür seçici (öğe) - belirli bir türe ait öğeleri seçer.
• Sınıf seçici (.sınıf) - belirli bir sınıfa sahip öğeleri seçer.
• Kimlik seçici (#id) - belirli bir kimliğe sahip öğeyi seçer.
• Öznitelik seçici ([özellik], [özellik="değer"], [özellik~="değer"], [özellik|="değer"], [özellik^="değer"], [özellik$="değer"], [özellik*="değer"]) - öznitelik varlığı veya değeri temelinde öğeleri seçer.
• Pseudo-sınıflar (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(seçici)) - belirli durumda veya konumda olan öğeleri seçer.
• Pseudo-öğeler (::before, ::after, ::first-line, ::first-letter, ::selection) - öğenin parçalarını seçer.
• Birleştiriciler:
  • Çocuk seçici (seçici seçici) - ilk seçicinin çocuklarını seçer.
  • Doğrudan çocuk seçici (seçici > seçici) - ilk seçicinin doğrudan çocuklarını seçer.
  • Yan kardeş seçici (seçici + seçici) - ilk seçicinin hemen sonraki kardeş öğesini seçer.
  • Genel kardeş seçici (seçici ~ seçici) - ilk seçicinin tüm kardeşlerini seçer.

Örnekler:

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

/* Tür seçici */
p {
  line-height: 1.5;
}

/* Sınıf seçici */
.highlight {
  color: yellow;
}

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

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

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

/* Pseudo-öğe */
p::first-letter {
  font-weight: bold;
}

/* Birleştiriciler */
div p {
  margin-bottom: 10px; /* div içindeki paragraflar */
}
ul > li {
  list-style: none; /* ul içindeki doğrudan li çocukları */
}
h2 + p {
  margin-top: 5px; /* h2’den hemen sonra gelen paragraf */
}
h3 ~ p {
  color: gray; /* h3’den sonra gelen tüm paragraflar */
}