Jaké CSS selektory znáte?

• Univerzální selektor (*) - vybírá všechny prvky.
• Typový selektor (prvek) - vybírá prvky daného typu.
• Selektor třídy (.třída) - vybírá prvky s danou třídou.
• Selektor ID (#id) - vybírá prvek s daným ID.
• Selektor atributu ([atribut], [atribut="hodnota"], [atribut~="hodnota"], [atribut|="hodnota"], [atribut^="hodnota"], [atribut$="hodnota"], [atribut*="hodnota"]) - vybírá prvky na základě přítomnosti nebo hodnoty atributu.
• Pseudo-třídy (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektor)) - vybírá prvky v určitých stavech nebo pozicích.
• Pseudo-prvky (::before, ::after, ::first-line, ::first-letter, ::selection) - vybírá části prvku.
• Kombinátory:
  • Potomek (selektor selektor) - vybírá potomky prvního selektoru.
  • Přímý potomek (selektor > selektor) - vybírá přímé potomky prvního selektoru.
  • Sousední sourozenec (selektor + selektor) - vybírá následujícího sourozence prvního selektoru.
  • Obecný sourozenec (selektor ~ selektor) - vybírá všechny sourozence prvního selektoru.

Příklady:

/* Univerzální selektor */
* {
  margin: 0;
  padding: 0;
}

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

/* Selektor třídy */
.highlight {
  color: yellow;
}

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

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

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

/* Pseudo-prvek */

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

/* Kombinátory */
div p {
  margin-bottom: 10px; /* Odstavce uvnitř divu */
}
ul > li {
  list-style: none; /* Přímí potomci li uvnitř ul */
}
h2 + p {
  margin-top: 5px; /* Odstavec přímo následující po h2 */
}
h3 ~ p {
  color: gray; /* Všechny odstavce po h3 */
}