Jakie selektory CSS znasz?

• Uniwersalny selektor (*) - wybiera wszystkie elementy.
• Selekor typu (element) - wybiera elementy określonego typu.
• Selekor klasy (.klasa) - wybiera elementy z określoną klasą.
• Selekor identyfikatora (#id) - wybiera element z określonym identyfikatorem.
• Selekor atrybutu ([atrybut], [atrybut="wartość"], [atrybut~="wartość"], [atrybut|="wartość"], [atrybut^="wartość"], [atrybut$="wartość"], [atrybut*="wartość"]) - wybiera elementy na podstawie obecności lub wartości atrybutu.
• Pseudo-klasy (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selektor)) - wybierają elementy w określonym stanie lub położeniu.
• Pseudo-elementy (::before, ::after, ::first-line, ::first-letter, ::selection) - wybierają części elementu.
• Kombinatory:
  • Selektor potomka (selektor selektor) - wybiera elementy potomne pierwszego selektora.
  • Selektor bezpośredniego potomka (selektor > selektor) - wybiera bezpośrednich potomków pierwszego selektora.
  • Selektor sąsiedniego brata (selektor + selektor) - wybiera element, który jest bezpośrednim bratem (następnym) pierwszego selektora.
  • Selektor ogólnego brata (selektor ~ selektor) - wybiera wszystkie elementy będące braćmi (następnymi) pierwszego selektora.

Przykłady:

/* Selektor uniwersalny */
* {
  margin: 0;
  padding: 0;
}

/* Selektor typu */
p {
  line-height: 1.5;
}

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

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

/* Selektor atrybutu */
[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;
}

/* Kombinatory */
div p {
  margin-bottom: 10px; /* Akapity wewnątrz div */
}
ul > li {
  list-style: none; /* Bezpośredni potomkowie li w ul */
}
h2 + p {
  margin-top: 5px; /* Akapit bezpośrednio po h2 */
}
h3 ~ p {
  color: gray; /* Wszystkie akapity po h3 */
}