Aké CSS selektory poznáte?

• Univerzálny selektor (*) - vyberá všetky prvky.
• Typový selektor (prvok) - vyberá prvky daného typu.
• Selektor triedy (.trieda) - vyberá prvky s danou triedou.
• Selektor identifikátora (#id) - vyberá prvok s daným identifikátorom.
• Selektor atribútu ([atribút], [atribút="hodnota"], [atribút~="hodnota"], [atribút|="hodnota"], [atribút^="hodnota"], [atribút$="hodnota"], [atribút*="hodnota"]) - vyberá prvky na základe prítomnosti alebo hodnoty atribútu.
• Pseudo-triedy (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektor)) - vyberá prvky v určitom stave alebo pozícii.
• Pseudo-prvky (::before, ::after, ::first-line, ::first-letter, ::selection) - vyberajú časti prvku.
• Konektory:
  • Potomok (selektor selektor) - vyberá potomkov prvého selektora.
  • Priamy potomok (selektor > selektor) - vyberá priame potomkov prvého selektora.
  • Susedný brat (selektor + selektor) - vyberá prvok, ktorý je bezprostredný brat (nasledujúci) prvého selektora.
  • Všeobecný brat (selektor ~ selektor) - vyberá všetkých bratov (nasledujúcich) prvého selektora.

Príklady:

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

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

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

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

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

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

/* Pseudo-prvok */

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

/* Konektory */
div p {
  margin-bottom: 10px; /* Odstavce vnútri divu */
}
ul > li {
  list-style: none; /* Priame deti li vnútri ul */
}
h2 + p {
  margin-top: 5px; /* Odstavec, ktorý nasleduje priamo po h2 */
}
h3 ~ p {
  color: gray; /* Všetky odstavce po h3 */
}