Logo

FÜNF – WordPress-Theme | Olli's Theme-Testblog

Navigation anzeigen ↓
  • Herzlich willkommen
  • Über mich
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
↑ Navigation schließen
  • ↑ Oben
  • 19
    Jan
    2012
    1

    [CSS3] Pseudo-Spielchen

    Genau genommen ist die Überschrift nicht ganz korrekt. Es geht es hier nicht in erster Linie um CSS3, denn viele der Pseudoelemente bzw. -klassen gab es schon mit CSS2 oder früher. Dennoch wird es im Zusammenspiel mit den Möglichkeiten, die uns CSS3 bietet, erst richtig spannend. Jeder von uns, so hoffe ich zumindest, kennt die Pseudoklasse :hover. Auch :active oder :visited dürften dem ein oder anderem bekannt sein. Aber wie steht’s mit :first-letter, :before oder :after?

    Neugierig?

    Pseudoelemente oder -klassen sind, wie der Name schon sagt, keine eigenständigen Elemente oder Klassen. Sie benötigen und beziehen sich immer auf ein anderes Element oder eine andere Klasse.

    Es gibt eine ganze Reihe von Pseudoelementen und -klassen. Ich habe mal die interessantesten für euch zusammengetragen:

    • :link = für Verweise zu noch nicht besuchten Seiten
    • :visited = für Verweise zu bereits besuchten Seiten
    • :focus = für Elemente, die den Fokus erhalten, z.B. durch „Durchsteppen“ mit der Tabulator-Taste (CSS 2.0)
    • :hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
    • :active = für gerade angeklickte Elemente
    • :first-child (Pseudoklasse) = das Element, das das erste Kindelement eines anderen Elements ist erhält die CSS-Eigenschaften
    • :nth-child (Pseudoklasse) = das Element des Kindelements, das im Parameter aufgerufen wird, erhält die CSS-Eigenschaften
    • :first-line (Pseudoelement) = die erste Textzeile des Elements erhält die CSS-Eigenschaften
    • :first-letter (Pseudoelement) = das erste Zeichen des Textes erhält die CSS-Eigenschaften
    • :before = Inhalt, der vor dem notierten Inhalt des Elements eingefügt werden soll
    • :after = Inhalt, der nach dem notierten Inhalt des Elements eingefügt werden soll

    Schauen wir uns nun mal einige davon etwas genauer an.

    Mittels :first-child wird das erste „Kind“-Element eines „Eltern“-Elements angesprochen. So kann beispielsweise der erste Eintrag in einer Liste anders gestaltet werden:

    [css]li {
    color: #000;
    }

    li:first-child {
    color: orange
    }[/css]

    Dementsprechend kann mit :nth-child gezielt ein bestimmtes (hier das zweite)

    [css]li {
    color: #000;
    }

    li:nth-child(2) {
    color: orange
    }[/css]

    oder auch mehrere „Kind“-Elemente bestimmt werden (hier jedes zweite)

    [css]li {
    color: #000;
    }

    li:nth-child(2n) {
    color: orange
    }[/css]

    Das Element :first-letter spricht das erste Zeichen eines Absatzes an. So können wir diesem beispielsweise eine größere Schrift zuweisen:

    [css]p {
    font-size:14px;
    }

    p:first-letter {
    font-size:30px;
    }[/css]

    Kommen wir zu den heimlichen Stars der Pseudoelemente: :before und :after. Diese fügen vor oder nach einem Element einen beliebigen Inhalt ein, der mit content angegeben wird. Das können Zeichen, Text, Grafik und vieles mehr sein. Damit habt ihr ein Werkzeug zur Verfügung um per Style-Deklaration Inhalte zu definieren. Klasse, oder?

    Einfaches Beispiel:

    [css].box {
    position: relative;
    margin: 100px;
    background: #000;
    width: 200px;
    height: 100px;
    color: #fff;
    font-size: 16px;
    line-height: 100px;
    text-align: center;
    }

    .box:before {
    content:":before";
    position: absolute;
    top: -50px;
    left: 0;
    width: 200px;
    height: 40px;
    background: orange;
    line-height: 40px;
    }

    .box:after {
    content:":after";
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 200px;
    height: 40px;
    background: red;
    line-height: 40px;
    }[/css]

    Da :before und :after immer einen Inhalt erwarten, ist es wichtig, dass content definiert wird, auch wenn die Elemente gar keinen Inhalt ausgegeben. Habt ihr einen solchen Fall, definiert ihr dies mit Anführungszeichen ohne Inhalt:

    [css].box:before {
    …
    content: "";
    …
    }[/css]

    Nun aber genug der Theorie. Lasst uns ein paar Beispiele ansehen. Ich habe da mal was für euch vorbereitet. Hier geht’s lang:

    Demo ansehen

    Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:

    Übersicht CSS3
    Veröffentlicht von olga am 19. Januar 2012 | 1 Kommentar
    Kategorien: Webdesign
    Schlagworte: css | demo | html | internet | tutorial
    Diese Artikel könnten dich ebenfalls interessieren
    • [WordPress] Theme "DREI" steht bereit
    • [WordPress] Mehrere Sidebars nutzen
    • [WordPress] Mein neues Theme 'ZWEI'
    • [WordPress] 'EINS' – Mein erstes WordPress-Theme

    1 Kommentar

    1. manuel sagt:
      16. Februar 2012 um 19:34

      tausend dank für diese tolle webseite. hat mir echt weitergeholfen, es ist ne geile referenz.
      grüsse aus berlin

      Zum Antworten anmelden

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Seitenanfang ↑
    • 239 Artikel
    • 292 Kommentare
    • Artikel RSS-Feed
    • Kommentar RSS-Feed
    • © FÜNF – WordPress-Theme angetrieben von Wordpress
    • Theme 'FUENF' von Oliver Gast
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme "DREI" steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit "transform"
      • Ronny Reicher bei [Word 2010] Sprungliste (zuletzt verwendete Dokumente) unter Windows 7 funktioniert nicht mehr
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360