div und span

div und span machen besonders in der Kombination mit CSS Sinn. Beide Tags haben in HTML erstmal keine semantische Bedeutung und dienen eher dazu Bereiche einer Website einzugrenzen. Wenn du diese Bereiche dann mit CSS-Regeln ansprichst, kannst du sie im Aussehen verändern.

Wie sich div und span unterscheiden (Stichwort: Block-Level- und Inline-Elemente) weißt du sicher noch aus dem HTML-Kurs. Falls du dein Wissen auffrischen willst, habe ich dazu auch einen Blog-Artikel inkl. Tutorial-Video geschrieben, den ich in der Infobox verlinke.

Hier ist ein Beispiel mit einer typischen Nutzung von div und span:

   
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
   labore et dolore magna aliqua.

Du umrahmst mehrere HTML-Elemente mit einem div und kannst so nun allen Elementen gemeinsam mit CSS ansprechen, z.B. einen Rahme oder eine Hintergrundfarbe geben.

Mit dem span Tag umrandest du einen Inline-Teil eines HTML-Elements, z.B. einen bestimmten Teil eines Textabsatzes. Nur diesen umrandeten Teil kannst du nun mit CSS im Aussehen verändern.

Kombination von Selektoren

Wenn du nur bestimmte Elemente, also z.B. die Textabsätze in einem bestimmten div ansprechen willst, kannst du Selektoren Kombinieren.

Wir können nun dem p Tag in dem div bestimmte Styles zuordnen. Alle anderen p Tags die nicht in einem div mit dieser Klasse sind, werden davon unberührt bleiben.

Dazu sprichst du erst das div Tag mit der Klasse an und schreibst dahinter getrennt durch ein Leerzeichen das Element im div Tag, welches du ansprechen willst. In dem Fall p. So werden dann nur die p Tags gestyled die sich in einem div Tag mit der entsprechenden Klasse befinden.
Alle anderen p Tags bleiben unberührt.

Hier ist etwas Text 
und ein p-Tag
.
Und hier nur ein p-Tag ohne div

div.eine-klasse p { 
   color: red;
   font-family: Arial, sans-serif; 
}

p { 
   color: black;
   font-weight: bold; 
}

Du siehst also man kann ziemlich spezifisch festlegen, welches HTML-Element man ansprechen will.

Universeller Selektor

Wenn du alle Elemente innerhalb eines Elements einen bestimmten Stil zuordnen willst, kannst du dies über einen Asterisk festlegen. Schreibe den Stern einfach hinter den Selektor und alle Elemente innerhalb dieses Elements werden dadurch verändern.

.eine-klasse * { 
   color: black;
   font-family: Arial, sans-serif; 
}

Mit dem Stern hinter der Klasse werden nun alle Elemente innerhalb der Klasse im Aussehen verändert.

Du kannst auch alle Elemente einer Website verändern, in dem du nur den Stern als Selektoren verwendest.

* { 
   color: green;
   font-family: Arial, sans-serif; 
}

Damit würden alle Elemente der Website eine grüne Schriftfarbe erhalten.

Kind-Selektor

Manchmal kommt es vor, dass du bestimmte Elemente, die sich in einem Bereich befinden ansprachen willst. Beispielsweise die Textabsätze in einem div.

   
Wird nicht verändert. Ist zwar Kind-Element des Divs aber kein P-Tag
   
Wird verändert. Ist das P-Kind-Element vom Div.
   
Wird verändert. Ist das P-Kind-Element vom Div.

In dem Fall sind die h1 und p Tags Kind-Elemente des div Tags, da sie vom div Tag umschlossen werden. Wenn du nun alle p Tags in dem div ansprechen willst, kann du dies mit dem Kind-Selektor tun.

Mit dem Kind-Selektor sprichst du die Kind-Elemente an, also diese Elemente die sich direkt innerhalb des Eltern-Elements binden.

Das klingt komplizierter als es ist. Wenn du beispielsweise alle p Tags innerhalb eines div Tags ansprechen willst, schreibst du zuerst das Eltern-Element, also in dem Fall das div und darauf folgend durch ein Kleiner-Als-Zeichen getrennt das Kind-Element. So sprichst du dann alle Kind-Elemente innerhalb des Eltern-Elements an.

div.eine-klasse > p { 
   color: red;
   font-family: Arial, sans-serif; 
}

   
Wird nicht verändert. Ist zwar Kind-Element des Divs aber kein P-Tag
   
Wird verändert. Ist das P-Kind-Element vom Div.
   
Wird verändert. Ist das P-Kind-Element vom Div.

Die Kind-Selektoren, also:

div.eine-klasse > p { 
   color: red;
   font-family: Arial, sans-serif; 
}

Sind nicht zu verwechseln mit den kombinierten Selektoren, also ohne das Kleiner-Als-Zeichen zwischen den Selektoren:

div.eine-klasse p { 
   color: red;
   font-family: Arial, sans-serif; 
}

Der Unterschied ist, dass die kombinierten Selektoren hier beispielsweise alle p Tags ansprechen, die sich in diesem div befinden. Der Kind-Selektor spricht nur die p Tags an, die direkte Kinder des div Tags sind. Würde sich also ein weiteres p Tag in dem div befinden, welches tiefer verschachtelt ist, dann würde dieses p Tag, welches kein direktes Kind des div ist, nicht im Aussehen verändert werden.

   
Wird nicht verändert. Ist zwar Kind-Element des Divs aber kein P-Tag
   
Wird bei einem Kind-Selektor verändert. Ist das P-Kind-Element vom Div.
   
Wird bei einem Kind-Selektor verändert. Ist das P-Kind-Element vom Div.
   
Wird bei einem Kind-Selektor NICHT verändert. Ist das P-Kind-Element vom Span und nicht von Div.

Folge-Selektor

Im Unterschied zu dem gerade besprochenen Kind-Selektor, dass alle direkten Kind-Elemente anspricht, kannst du mit dem Folge-Selektor das HTML-Element ansprechen, welches direkt auf ein anderes folgt. Der Folge-Selektor erwartet ein Pluszeichen (+) zwischen den beiden Selektoren.

h1 + p { 
   color: green;
}

In diesem Fall ist das erste p Tag das direkte Folgeelement des h1 Tags. Es wird also durch den Folgelektor h1 + p angesprochen. Das zweite p Tag wiederum folgt nicht unmittelbar auf das h1 Tag und wird somit nicht verändert.

   
Dies ist eine Überschrift
   
Dieses P-Tag folgt direkt auf das H1-Tag und wird daher verändert.
   
Dieses P-Tag folgt nicht direkt der H1 und wird somit NICHT verändert.

Es gibt einen weiteren Folge-Selektor seit CSS3. Dieser verändert alle Folgeelemente nach einem Tag.

h1 ~ p { 
   color: green;
}

Das zweite p Tag könntest du auf diese Weise ansprechen:

h1 + p + p { 
   color: green;
}

In diesem Fall wird das p Tag angesprochen, welches auf ein p Tag folgt, dass wiederum auf ein h1 Tag folgt.

   
Dies ist eine Überschrift
   
Dieses P-Tag folgt auf das H1-Tag und wird daher NICHT verändert.
   
Dieses P-Tag folgt auf ein P-Tag, welches auf ein H1-Tag und wird somit verändert.

Das Tilde-Zeichen (~) steht zwischen dem Start-Selektor und dem Folge-Selektor. Alle Folgeelemente nach dem Startelement werden nun entsprechend im Aussehen verändert.

   
Attribut-Selektoren
   Link

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.