Koje CSS selektore poznajete?

• Univerzalni selektor (*) - bira sve elemente.
• Tip selektor (element) - bira elemente određenog tipa.
• Selektor klase (.klasa) - bira elemente sa određenom klasom.
• Selektor identifikatora (#id) - bira element sa određenim identifikatorom.
• Selektor atributa ([atribut], [atribut="vrednost"], [atribut~="vrednost"], [atribut|="vrednost"], [atribut^="vrednost"], [atribut$="vrednost"], [atribut*="vrednost"]) - bira elemente na osnovu prisustva ili vrednosti atributa.
• Pseudo-klase (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektor)) - biraju elemente u određenom stanju ili poziciji.
• Pseudo-elementi (::before, ::after, ::first-line, ::first-letter, ::selection) - biraju delove elementa.
• Konektori:
  • Potomak (selektor selektor) - bira potomke prvog selektora.
  • Direktni potomak (selektor > selektor) - bira direktne potomke prvog selektora.
  • Susedni brat (selektor + selektor) - bira element koji je neposredni brat (sledeći) prvog selektora.
  • Opšti brat (selektor ~ selektor) - bira sve elemente koji su braća (sledeći) prvog selektora.

Primeri:

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

/* Tip selektor */
p {
  line-height: 1.5;
}

/* Selektor klase */
.highlight {
  color: yellow;
}

/* Selektor ID */
#main-header {
  font-size: 2em;
}

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

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

/* Pseudo-element */

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

/* Konektori */
div p {
  margin-bottom: 10px; /* Paragrafi unutar diva */
}
ul > li {
  list-style: none; /* Direktni potomci li unutar ul */
}
h2 + p {
  margin-top: 5px; /* Paragraf koji odmah sledi posle h2 */
}
h3 ~ p {
  color: gray; /* Svi paragrafi posle h3 */
}