Inhaltsverzeichnis

CSS
- - Element Selektoren
  - Klassen und ID Selktoren
- Kombinierte Selektoren

CSS

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.

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 #

CSS

#meineIDEins {color: red;}

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

Kombinierte Selektoren

Zusatzinformationen: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator

Nachfahren Selektoren

div p {color: red;}

Mit dieser Anweisung werden alle Absätze ausgewählt, die Nachfahre eines ‹div></div> Tags sind. Kinder, Enkel, etc.

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;}

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 / Nachbarelement-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. Erstes nachfolgendes Geschwister.

CSS

h1+p{background-color: red;}

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>

Geschwister-Selektor

h1~p {color: red;}

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

CSS

h1~p{background-color: red;}

HTML

...
<body>
   <h1>
      Ich bin eine Überschrift
   </h1>
   <p>
      Ich folge der Überschrift und werde formatiert.
   </p>

   <p>
    Ich folge der Überschrift und werde formatiert.
   </p>
   
   <div>
       <p>
         Ich folge nicht der Überschrift und werde nicht formatiert.
       </p>
   </div>
 </body>