CSS Tipps + Tricks – Alle Elemente ansprechen mit * und >*

Wie inzwischen bekannt ist, wird die Gestaltung von Webseiten in CSS erledigt. CSS (Cascading Style Sheets / gestufte Gestaltungsbögen) ist eine Gestaltungssprache um HTML-Dokumente ansprechend aussehen zu lassen und somit eine der Kernsprachen in den weiten des Internets (World Wide Web).

Im Beitrag Teil 3: Figuren gestalten mit CSS wurde in den Kommentaren die Frage gestellt, welche Bedeutung der Stern (*) bzw. die Kombination Größer Stern (>*) – auch Pfeil Stern genannt – in CSS hat. Das soll hier kurz erläutert werden.

Der einfache Stern (*) spricht alle Elemente und alle untergeordneten Ebenen an und dient somit als Universalselector. Als Beispiel soll dieser kurze Code dienen:

<body>
  <section id="one">
  <p>Teil 1: Das ist ein Fülltext</p>
  </section>
  <section id="two">
  <h2>Teil 2: Das ist ein Fülltext</h2>
  </section>
  <section id="three">
  <div>
  <p>Teil 3: Das ist ein Fülltext</p>
  </div>
  </section>
</body>

Wenn nun also alle section angesprochen werden sollen, kann das über section {padding:15px}passieren. Wenn ich nun aber alle darin liegenden Tags, wie p, h2 oder div, angesprochen werden sollen, dann geht das über

section {padding:15px}
p {padding:15px}
h2 {padding:15px}
div {padding:15px}
div p {padding:15px}

Alternativ kann aber auch


body * {padding:15px}
body

Ein Haken hat diese Schreibweise nun aber. Denn es haben ALLE Tags 15px Innenabstand. Auch das p im div im section#three. Dieses p soll aber vielleicht gar keinen Innenabstand bekommen? Hier kommt der Größer Stern (>*) zum Einsatz.


section > * {padding:15px}

Mit dieser einfachen CSS-Anweisung wird nur den Tags in der nächsten Ebene unter der section ein Innenabstand von 15px gegeben. Das p in section#three ist davon ausgeschlossen, da es noch eine Ebene tiefer liegt.

Eine gute Übersicht über den Einsatz von CSS beinhaltet die dazugehörige Seite bei Wikipedia.


wallpaper-1019588
[Manga] Berserk [12]
wallpaper-1019588
Klapp-Smartphone Huawei P50 Pocket erscheint in Deutschland
wallpaper-1019588
Warum hecheln Hunde?
wallpaper-1019588
Tempel von Angkor