Kādus CSS selektorus jūs zināt?

• Universālais selektors (*) - izvēlas visus elementus.
• Tipa selektors (elements) - izvēlas noteikta veida elementus.
• Klases selektors (.klase) - izvēlas elementus ar noteiktu klasi.
• Identifikatora selektors (#id) - izvēlas elementu ar noteiktu identifikatoru.
• Atribūta selektors ([atributs], [atributs="vērtība"], [atributs~="vērtība"], [atributs|="vērtība"], [atributs^="vērtība"], [atributs$="vērtība"], [atributs*="vērtība"]) - izvēlas elementus pēc atribūta esamības vai vērtības.
• Pseido-klases (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektors)) - izvēlas elementus noteiktā stāvoklī vai pozīcijā.
• Pseido-elementi (::before, ::after, ::first-line, ::first-letter, ::selection) - izvēlas elementa daļas.
• Kōmbinatorii:
  • Bērnu selektors (selektors selektors) - izvēlas pirmā selektora bērnus.
  • Tieši bērnu selektors (selektors > selektors) - izvēlas tiešos bērnus.
  • Nākamā brāļa selektors (selektors + selektors) - izvēlas pirmā selektora tiešo brāli.
  • Kopējais brāļa selektors (selektors ~ selektors) - izvēlas visus brāļus.

Piemēri:

/* Universālais selektors */
* {
  margin: 0;
  padding: 0;
}

/* Tipa selektors */
p {
  line-height: 1.5;
}

/* Klases selektors */
.highlight {
  color: yellow;
}

/* Identifikatora selektors */
#main-header {
  font-size: 2em;
}

/* Atribūta selektors */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

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

/* Pseido-elementi */
p::first-letter {
  font-weight: bold;
}

/* Kōmbinatorii */
div p {
  margin-bottom: 10px; /* Paragrafo iekšā div */
}
ul > li {
  list-style: none; /* Tieši bērni ul iekšā */
}
h2 + p {
  margin-top: 5px; /* Paragrafs tieši pēc h2 */
}
h3 ~ p {
  color: gray; /* Visi paragrāfi pēc h3 */
}