CSS Selektoren

Um bestimmte Elemente gezielt formatieren zu können, musst du sie direkt ansprechen können um ihnen dann eine Formatierung zuzuweisen. Diese Auswahl geschieht mit Selektoren.

Grundlagen

Selektor {Eigenschaft1: Wert; Eigenschaft2: Wert; Eigenschaft3: Wert; u.s.w.}





Der Selektor zeigt an, für welches Element der (X)HTML Seite die Formatierungsanweisung gelten soll. Die Abbildung zeigt eine Anweisung, die die Schriftfarbe aller <p> Absätze auf blau setzt.

Element Selektoren

Am einfachsten formatierst du Elemente, indem du die Formatierung direkt einem bestimmten Tag zuordnest.

p {color: blue;} 

So weist du allen <p> Tags die Schriftfarbe blau zu.

Mehrere Stile zuweisen

Innerhalb einer Deklaration können mehrere Stil-Anweisungen aufgelistet werden. Die Anweisungen sind durch ein Semikolon (;) zu trennen.

p {color: blue; font-size: 130%;}


Mehreren Elementen den gleichen Stil zuweisen

Willst du mehreren Elementen den gleichen Stil zuweisen, dann kannst du sie mit Komma getrennt vor der Deklaration auflisten.

p, h2, ul {color: blue;}


Bestimmte Bereiche formatieren

Mit den Elementen <div> und <span> kannst du Bereiche auswählen, die du formatieren möchtest. Ohne den Einsatz von css haben die beiden Tags keine Auswirkungen auf den Aufbau einer Seite.
<div> ist ein Block-ELement und erzeugt einen Zeilenumbruch.
<span> ist ein Inline-Element.

Kombinierte Selektoren

Tags innerhalb von Tags formatieren

div p {color: red;}

Mit dieser Anweisung werden alle Absätze ausgewählt, die innerhalb eines <div> </div> Tags stehen.


Klassen und ID Selktoren

Klassen-Selektoren

Jedes Element / jeder Tag innerhalb des <body></body> Tags kann mit dem Attribut class=“blabla versehen werden. Über dieses Klassen-Attribut können Elemente einem Stil zugeordnet werden.

Eine Klassen-Definition beginnt immer mit einem Punkt

CSS
.meineKlasse {color: red;}
.meineAndereKlasse {color: blue;}


(X)HTML
...
<body>
   <p class="meineKlasse">
      Hier ist der Text des ersten Abschnitts
   </p>

   <p>
      Hier ist der Text des zweiten Abschnitts
   </p>

   <p>
      Hier <span class="meineKlasse">ist</span> der Text <span class="meineAndereKlasse">des</span> dritten Abschnitts
   </p>
  
   <p class="meineAndereKlasse">
      Hier ist der Text des vierten Abschnitts
   </p>
</body>



ID-Selektoren

IDs sind einzigartig. Auch hier handelt es sich um ein Attribut. Mit dem Unterschied, dass eine der Wert einer ID nur einmal in einer Seite vorkommen darf.

<p id="ichBinEinzigartig">blabla</p> 



Eine ID-Definition beginnt immer mit einer Raute #

...
<body>
   <p id="meineIDEins">
      Hier ist der Text des ersten Abschnitts
   </p>

   <p>
      Hier <span id="meineIDZwei">ist</span> der Text des zweiten Abschnitts
     </p>

   <p>
      Hier ist der Text des dritten Abschnitts
   </p>
 </body>
...



Kind-Selektoren

body>p {color: red;}


Im Gegensatz zu den kombinierten Selektoren von weiter oben, wirkt der Kind-Selektor nur auf Elemente, die direkt innerhalb des Eltern/umschließenden Elementes stehen und keinen weiteren Tag dazwischen zulassen wie dies bei den kombinierten Selektoren möglich ist.

CSS
body>p {background-color: red;}


(X)HTML
...
<body>
   <p>
      Ich habe einen roten Hintergrund und blaue Schrift.
   </p>

   <div>
      <p>
         Ich habe einen leider keinen roten Hintergrund, da ich kein
         Kind des <body> Elementes bin.
         Blaue Schrift habe ich, da ich innerhalb des <body> Elements stehe.
      </p>
  </div>

   <p>
      Ich habe einen roten Hintergrund und blaue Schrift.
   </p>
 </body>


Folgeelement-Selektoren

h1+p {color: red;}


Dieser Stil wird auf das Elemente angewendet, dass unmittelbar auf ein anderes folgt und das gleiche Elternteil hat, d.h. nicht in ihm verschachtelt ist.

CSS
h1+p{background-color: red;}


(X)HTML
...
<body>
   <h1>
      Ich bin eine Überschrift
   </h1>
   <p>
      Ich folge als erster Absatz direkt der Überschrift.
   </p>

   <p>
      Ich bin der zweite Absatz und werde nicht formatiert.
   </p>
 </body>







Startseite > CSS > CSS Hilfsmittel

css/css_selektoren.txt · Zuletzt geändert: 10.11.2014 16:38 (Externe Bearbeitung)
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0