Milliseid CSS valijaid teate?

• Universaalselektor (*) - valib kõik elemendid.
• Tüüpselektor (element) - valib määratud tüüpi elemendid.
• Klasselektor (.klass) - valib elemendid, millel on määratud klass.
• Identifikaatorilektor (#id) - valib elemendi, millel on määratud identifikaator.
• Atribuudi selektor ([atribuut], [atribuut="väärtus"], [atribuut~="väärtus"], [atribuut|="väärtus"], [atribuut^="väärtus"], [atribuut$="väärtus"], [atribuut*="väärtus"]) - valib elemente atribuudi olemasolu või väärtuse põhjal.
• Pseudo-klassi (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(valik)) - valib elemente teatud seisundis või asukohas.
• Pseudo-element (::before, ::after, ::first-line, ::first-letter, ::selection) - valib elemendi osi.
• Kombinaatorid:
  • Järeltulija selektor (valik valik) - valib esimese valiku järeltulijaid.
  • Otse järeltulija selektor (valik > valik) - valib otse järeltulijaid.
  • Järgneva vennase selektor (valik + valik) - valib esimese valiku otse vennast.
  • Ühine vennase selektor (valik ~ valik) - valib kõiki vennaselemente.

Näited:

/* Universaalse selektori */
* {
  margin: 0;
  padding: 0;
}

/* Tüüpselektor */
p {
  line-height: 1.5;
}

/* Klasselektor */
.highlight {
  color: yellow;
}

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

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

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

/* Pseudo-element */

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

/* Kombinaatorid */
div p {
  margin-bottom: 10px; /* Paragrahvid divi sees */
}
ul > li {
  list-style: none; /* Otse järeltulijad ul sees */
}
h2 + p {
  margin-top: 5px; /* Paragrah, mis järgneb otse h2-le */
}
h3 ~ p {
  color: gray; /* Kõik paragrahvid pärast h3 */
}