Firebug: Wie nutze ich ihn richtig? – Teil #4

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Mit CSS2 kamen bereits Pseudo-Selektoren :after und :before hinzu. Mit CSS3 werden diese verstärkt genutzt und bekommen daher ein eigenes Tutorial für Firebug.

Dort sind genau diese Pseudo-Selektoren nicht ganz so einfach zu finden bzw. selbst hinzuzufügen. Andere Pseudo-Selektoren wie z.B. :nth-child(n) werden wie normale Elemente angezeigt, da diese auch immer dem Element selbst zugeordnet sind.
Mit den Pseudo-Selektoren :after und :before jedoch selektiert man nicht das Element selbst, sondern den Bereich hinter bzw. vor einem Element.


Exkurs :after und :before
Diese Pseudo-Selektoren sprechen einen Inhalt an, der normal gar nicht existiert. Aus diesem Grunde muss man ihn immer mit dem CSS-Befehl content: ""; erst einmal definieren. Vorher ist ein Selektieren dieser Befehle unnötig, da sie nicht vorhanden sind.
Mit CSS3 und den entsprechenden Fähigkeiten lassen sich damit z.B. Elemente nach außen hin abrunden und sich dadurch fließend in das Layout einfügen.


In Firebug gibt es keine direkte Möglichkeit, Inhalte, welche mit :after und :before hinzugefügt wurden, zu selektieren, da sie im HTML-Code nicht vorkommen. Stattdessen muss man das Element anwählen, dem das :after bzw. :before zugeordnet wurde. In folgendem Beispiel wäre das das Element mit der Klasse .afterBeforeClass:

CSS-Quellcode

  1. .afterBeforeClass:after {
  2. border-color: #fff;
  3. border-style: solid;
  4. border-width: 0px 10px 10px;
  5. border-radius: 10px;
  6. content: "";
  7. display: block;
  8. position: absolute;
  9. }
Der genannte CSS-Code wird dann im CSS-Bereich rechts im Firebug angezeigt und zwar immer ganz oben. Lediglich die Element-Eigentschaften werden noch darüber angezeigt.

Will man erst "on-the-fly" ein :after bzw. :before hinzufügen, so muss man hierzu die CSS-Eigenschaft eines Elements direkt bearbeiten und so ein :after oder :before anhängen, oder aber man nutzt den entsprechenden CSS-Tab in Firebug dafür. Dort kann man über Rechtsklick -> Neue Regel... eine neue CSS-Eigenschaft hinzufügen und dort die Pseudo-Selektoren auch angeben.

Diese ganzen speziellen „Regeln“ gelten nur für :after und :before bzw. ::after und ::before, da alle anderen Pseudo-Selektoren wirklich ein vorhandenes Element ansprechen.


Zum dritten Teil
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

453 mal gelesen

Kommentare 0

Es wurden keine Einträge gefunden.