Weitere Selektoren

1. Pseudoklassen: :pseudoklasse

• vorangestellter Doppelpunkt
• selektiert Elemente, die eine bestimmte Eigenschaft besitzten:
  • Position im DOM, z. B. :first-child, :nth-child(), :nth-of-type()
  • aktueller Zustand durch eine Benutzeraktion, z. B. :hover, :focus, :disabled
  • Liste aller Pseudoklassen

❮❯HTML<ul>
  <li>Liste 1</li>
  <li>Liste 2</li>
  <li>Liste 3</li>
  <li>Liste 4</li>
</ul>

❮❯CSSli:nth-of-type(2n) {
  /* für n = 0,1,2,... -> 2*n -> 0,2,4,... (Zeile 0 existiert nicht)*/
  background-color: lightgreen;
}

li:first-child {
  color: orange;
}

li:hover {
  font-size: 1.3em;
}

2. Pseudoelemente: ::pseudoelement

• vorangestellter zweifacher Doppelpunkt
• selektiert nur einen bestimmten Teil des Content, oder fügt ein extra Design Element hinzu
  • extra Designelement voranstellen (::before) oder nachfolgen (::after) lassen und mit der Eigenschaft content befüllen
  • einen speziellen Teil eines Elements stylen, z. B. ::first-letter, ::selection
  • Liste aller Pseudoelemente

❮❯HTML<ul>
  <li>Liste 1</li>
  <li>Liste 2</li>
  <li>Liste 3</li>
  <li>Liste 4</li>
</ul>

❮❯CSSli::selection {
  background-color: lightgreen;
}

li::marker {
  content: '**';
}

li::after {
  content: '**';
}