CSS-Selektoren
CSS-Selektoren werden verwendet um HTML-Elemente zu "finden" (oder wählen) die gestylt werden sollen. Man kann CSS Selektoren in 5 Kategorien unterteilen:Einfache Selektoren(Elemente basierend auf Name, ID, Klasse auswählen)
Kombinatoren(Elemente basierend auf einer bestimmten Beziehung zwischen ihnen auswählen)Pseudoklassenselektoren (Elemente basierend auf einem bestimmten Zustand auswählen)
Pseudoelement-Selektoren (einen Teil eines Elements auswählen und formatieren)
Attributselektoren (Elemente basierend auf einem Attribut oder Attributwert auswählen)
Auf dieser Seite werden die grundlegendsten CSS-Selektoren erläutert.
Der CSS Element-Selektor:
Der Element-Selektor wählt HTML-Elemente basierend auf seinem Namen.Unten ein Beispiel:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| p { |
| color: red; |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Das ist ein Absatz.</p> |
| <p>Das ist ein weiterer Absatz.</p> |
| </body> |
| </html> |
Der CSS id-Selektor
Der id-Selektor verwendet das id-Attribut eines HTML-Elementes um dieses auszuwählen. Die ID eines Elementes ist eindeutig innerhalb einer Webseite, so der id-Selektor wählt ein eindeutiges Element. Um mit dem id-Selektor ein Element zu wählen, schreibe ein Hashtag(#)-Zeichen gefolgt vom id-Name. Die CSS-Regel unten wird angewandt um ein HTML-Element mit der id="headings"; auszuwählen.Der CSS id-Selektor
Unten ein Beispiel:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #headings { |
| color: red; |
| text-align: center; |
| font-size: 16px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Das ist eine Überschrift</h1> |
| <h1 id="headings">Das ist eine Überschrift die mit einem id-Selektor gestylt wird.</h1> |
| </body> |
| </html> |
Der CSS class-Selektor
Der class-Selektor wählt ein HTML-Element mit dem spezifischen class-Attribut. Um ein HTML-Element mit einem class-Attribut zu wählen. schreibe ein .-Name.Der CSS class-Selektor:
Unten ein Beispiel mit einem class-Attribut:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .centerText { |
| text-align: center; |
| color: orange; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Das ist ein Absatz.</p> |
| <p class="centerText">Das ist ein weiterer Absatz mit dem class-Attribut gestylt.</p> |
| </body> |
| </html> |
Du kannst spezifisch nur ein HTML-Element wählen mit dem zutreffenden class-Attribut.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| p.center { |
| text-align: center; |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <h3 class="center">Diese Überschrift ist vom Style nicht betroffen.</h3> |
| <p class="center">Dieser Absatz wird rot sein und zentriert.</p> |
| </body> |
| </html> |
Das HTML-Element kann verweisen auf mehr als ein class-Attribut.
Im Beispiel unten das <p>
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| p.center { |
| text-align: center; |
| color: red; |
| } |
| p.large { |
| font-size: 300%; |
| } |
| </style> |
| </head> |
| <body> |
| <h1 class="center">Diese Überschrift wird von Style nicht betroffen sein</h1> |
| <p class="center">Dieser Absatz wird rot sein und zentriert.</p> |
| <p class="center large">Dieser Absatz wird rot sein, zentriert und hat eine grosse Buchstabengrösse.</p> |
| </body> |
| </html> |
Der CSS Universal Selektor
der unversal-Selektor (*) wählt alle HTML-Elemente auf einer Webseite. In der CSS-Regel unten sind alle HTML-Elemente betroffen auf der Seite.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| ∗ { |
| text-align: center; |
| color: blue; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Jedes Element auf dieser Seite wird vom Style betroffen sein.</p> |
| <p id="para1">Ich auch!</p> |
| <p>und ich!</p> |
| </body> |
| </html> |
Der CSS Gruppen-Selektor
Der Gruppen-Selektor wählt alle HTML-Elemente mit der gleichen Style-Definition. Schau dir folgenden CSS-Code an(Das h1 , h2 und p -Element haben den gleichen Style-Definition).
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| h1, h2, p { |
| text-align: center; |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Hallo Welt!</h1> |
| <h2>kleinere Überschrift!</h2> |
| <p>Das ist ein Absatz.</p> |
| </body> |
| </html> |
