© 2015 mm|creative – Mediengestaltung

CSS / Do it Yourself / Tipps und Tricks

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

- 21. November 2015

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}
verwendet werden. Nun haben alle Tags im body 15px Innenabstand. Das klingt verständlich?

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.

Wenn Sie Fragen zu CSS haben, kontaktieren Sie uns doch einfach. Wir helfen immer, wo wir können. Sie haben ein interessantes Webdesign Projekt, bei dessen Umsetzung Sie Hilfe benötigen? Auch dafür sind wir immer zu sprechen.

[button size=’large‘ style=’yellow‘ link=’/kontakt/‘ linktarget=_blank‘]Jetzt unverbindlich anfragen[/button]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.