13 – Grundlagen HTML & CSS: Pseudoklassen kennen und sinnvoll anwenden

Pseudoklassen wie :before, :after, :first-child oder :first-line können Ihnen helfen ein Design mit CSS entsprechend aufzubereiten bzw. umzusetzen. Die Verwendung dieser Pseudoklassen ist nicht immer sinnvoll. Trotzdem möchte ich Ihnen diese nicht vorenthalten. In diesem Video-Tutorial erkläre ich diese ausführlich und versuche sie auf unserer Homepage an sinnvollen Stellen zu verwenden und entsprechend zu formatieren.

So nutze ich die Pseudoklasse „:before“ und „:after“, um einen Absatz in grafischen Anführungszeichen zu setzen. Bei der Überschrift nutze ich „:first-line“ und „:first-child“, um bei einem Zeilenumbruch der Überschrift die zweite Zeile optisch etwas anders darzustellen.

Beispielhafte Anwendung der beiden Pseudoklassen „Frist-Child“ und „First-Line“:

#content h1:first-line {
  color: #ee7e1c;
  font-variant: small-caps;
  font-size: 150%;
}

#content h1:first-child {
  font-variant: small-caps;
}

Es bieten sich viele verschiedene Möglichkeiten um Pseudoklassen zu nutzen. Experimentieren Sie am besten einfach mal selbst, was man damit alles machen kann. Das gezeigte in der Video-Lektion soll grundsätzlich erste einmal die Funktionsweise aufzeigen. Wie und in welchem Umfang Sie davon an welcher Stelle Gebrauch machen können und sollten, ist Ihnen überlassen.