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 sogenannten Selektoren.

Grundlagen

Alle Formatierungsbefehle sind immer nach dem selben Prinzip aufgebaut.
Du musst angeben was du formatieren willst. Das geschieht über den Selektor.
nach dem Selektor steht innerhalb der { } wie das entsprechende Element formatiert werden soll.

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




Element

Willst du alle Vorkommen eines bestimmten Elementes formatieren ist er Selektor der Name des Elementes selbst.
So weist du allen <p> Tags die Schriftfarbe blau zu.

p {color: blue;} 



Mehreren Elementen den gleichen Stil zuweisen

Willst du mehreren Elementen den gleichen Stil zuweisen, dann kannst du sie mit Komma getrennt auflisten.
So weist du allen <p>, <h2> und <div> Tags die Schriftfarbe blau zu.

p, h2, div {color: blue;}



Kombinierte Selektoren

Willst du beispielsweise alle Tags formatieren, die innerhalb eines anderen Tags stehen, erreichst du das, indem du die Selektoren hintereinander schreibst.
So weist du den <p> Tags die Schriftfarbe blau zu, die innerhalb eines <div> Tags stehen.

div p {color: blue;}



Kind-Selektoren

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.
So weist du den <p> Tags die Schriftfarbe blau zu, die direkt innerhalb des <body> Tags stehen. Weiter verschachtelte <p> Tags bleiben von der Formatierung unberührt.

body>p {color: blue;}



Folgeelement-Selektoren

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.
So weist du den <p> Tags die Schriftfarbe blau zu, aber nur, wenn es einem <h1> Tag folgt.

h1+p {color: red;}



Pseudo-Klassen

Pseudoklassen sind Selektoren, zum Tragen kommen, wenn ein Element eine bestimmte Eigenschaft besitzt.
Am besten lässt sich das am Beispiel eines Links beschreiben.
Ein Link kann verschiedene Zustände besitzen.
Die Maus kann sich darüber befinden, es kann besucht sein, …
So weist du jedem besuchtem Link die Farbe gelb zu:

a:visited {color: yellow;}



So weist du jedem Link, über dem sich die Maus befindet, die Farbe grün zu:

a:hover{color: green;}




FIXME die Seite wird ab hier noch überarbeitet

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>
...







Startseite > Programmieren > CSS > CSS Hilfsmittel

programmieren/css/css_selektoren.txt · Zuletzt geändert: 10.11.2014 16:43 (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