Selektoren richtig angewendet

css-selektoren-richtig-angewendet.css

/*
Bei dieser Variante wird immer das erste Element und das letzte Element ausgewählt. Zudem wird automatisch über die Pseudoklasse :nth-child(2n) immer das zweite Element innerhalb der Liste ausgewählt und formatiert. Dies macht den CSS-Code nicht nur dynamisch und sauber, sondern sorgt auch für einen einwandfreien HTML-Quellcode.

Mit diesem kleinen Beispiel können wir nachvollziehen, welche Auswirkungen gute CSS-Selektoren auf ein gesamtes Projekt haben können. Nicht nur die CSS-Dateien sind übersichtlich und dynamisch, sondern auch die HTML-Datei ist nicht überfüllt mit unzähligen Klassen und IDs. Besonders bei großen Projekten ist es wichtig, den Überblick zu bewahren.  Zu viele Klassen und IDs können schnell vertauscht werden und lähmen unsere Webseite.

<ul class="list">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>
*/

.list li:first-child {
color: #f00;
}

.list li:nth-child(2n) {
font-weight: bold;
}

.list li:last-child {
color: #f00;
}