Selektoren und Vererbung

ID's, Klassen und Tags

Um alle Elemente eines bestimmten Tags formatierenn, kann man diesen so ansprechen:

body {
		
}

Greift auf <body> </body> zu.

Um Elemente anhand einer Class auszuwählen, ist ein Punkt vor den Classname zu setzen:

.hund {
		
}

Greift auf <div class="hund"> </div> zu.

Um Elemente anhand einer ID auszuwählen, ist eine Raute vor den ID-Namen zu setzen:

#katze {
		
}

Greift auf <div id="katze"> </div> zu.

Unterschied zwischen Class und ID

Während x-beliebig viele Classes x-beliebig vielen Elemeten zugewisen werden können, kann eine ID nur einem einzelnen Element zugeordnet werden. Beides hat seine Vorteile und Nachteile und man sollte sich nicht auf eines davon versteifen. Beispielsweise kann man mithilfe der URL zu einem Element mit einer ID springen, was bei einer Class nicht funktioniert. Auch die Arbeit mit JavaScript erleichtern ID's, da man einfacher auf ein einzelnes Element zugreifen kann (DOM).

Vererbung

Vererbung kann sehr praktisch sein. Beispielsweise bei der Formatierung von Tabellen und Listen. 

table.datentabelle tr td {
		
}

Alle td's, welche sich in tr's befinden, welche sich in table's befinden, welche die Class "datentabelle" tragen, werden von diesem Selektor angesprochen.

tables mit class datentabelle -> darin enthaltene trs -> darin enthaltene td's

Pseudoklassen und weitere Selektoren

Pseudoklassen sind spezielle Selektor-Zusätze, welche für spezielle Bedingungen stehen. Zum Beispiel wenn die Maus das Element berührt oder das Element fokusiert wurde.
Einige der wichtigsten Pseudoklassen:

.element:link {  }		/* Verweis zu noch nicht besuchter Seite */
.element:visited {  }	/* Verweis zu bereits besuchter Seite */
.element:active {  }	/* Element wird gerade angeklickt */
.element:hover {  }		/* Element wird gerade mit der Maus berührt */
.element:focus {  }		/* Element wurde ausgewählt z.B. per Tabulator */

.element:nth-of-type(even) {  }	/* 2, 4, 6, etc. Element -> geradzahlig */
.element:nth-of-type(odd) {  }	/* 1, 3, 5, etc. Element -> ungerade */

.element:first-line {  }	/* Erste Linie eines Textes */
.element:first-letter {  }	/* Erstes Zeichen eines Textes */
.element:first-child {  }	/* Erstes Childelement */

/* Anhand von Attributen */

.element[type="text"] {   }