HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » CSS » Pseudo-Klassen

CSS: Pseudo-Klassen

von Jan Winkler

Pseudo-Klassen sind Klassifizierungen, die einen Zustand oder eine Eigenschaft eines Elements beschreiben. Sie werden an den Elementnamen bzw. die vorhergehende Klassifizierung angehängt. In CSS Level 1 werden dabei 3 verschiedene Pseudo-Klassen beschrieben, die sich alle auf ein Element beziehen: A (Link/Anker).
In CSS Level 2 sind es dann schon 7.

Anzeige

CSS Level 1 :link  nach oben

Die :link Pseudo-Klasse beschreibt ein A-Element (Link/Anker), wenn es sich dabei um einen Link und nicht um einen Anker handelt (also wenn es das href-Attribut enthält). Diese Klasse kann nur bei A-Elementen angewandt werden. Beispiel:

A:link { ... }
/* Alle Elemente A die ein Link sind */

CSS Level 1 :visited  nach oben

Die :visited Pseudo-Klasse bezieht sich auf ein A-Element, wenn der Link bzw. das Dokument auf das er führt bereits besucht wurde. Diese Klasse kann nur bei A-Elementen angewandt werden. Beispiel:

A:visited { ... }
/*Alle Elemente A deren Zieldokument bereits besucht wurde*/

CSS Level 1 CSS Level 2 :active  nach oben

Die :active Pseudo-Klasse beschreibt ein Element, wenn dieses aktiv ist. Nach CSS 1 darf diese Klasse nur bei A-Elementen angewandt werden - CSS Level 2 beschreibt sie jedoch für alle Elemente. Beispiel:

A:active { ... }
/*Alle Elemente A die gerade aktiv sind (CSS 1)*/

INPUT:active { ... }
/*Alle Elemente INPUT die gerade aktiv sind (CSS 2)*/

CSS Level 2 :hover  nach oben

Die :hover Pseudo-Klasse bezieht sich auf ein Element, über dem sich die Maus befindet/über dem die Maus schwebt (engl. hover = schweben). Damit sind die sogenannten Hover-Effekte (z.B. Veränderung der Farbe eines Links, wenn ihn die Maus überfährt) möglich. Beispiel:

A:hover { ... }
/*Alle Elemente A über denen sich die Maus befindet (Hover-Effekt)*/

CSS Level 2 :focus  nach oben

Die :focus Pseudo-Klasse beschreibt ein Element, das gerade den Fokus besitzt (beispielsweise ein markiertes Element oder ein Eingabefeld in das gerade eingegeben werden kann). Beispiel:

INPUT:focus { ... }
/*Alle Elemente INPUT die den Fokus besitzen*/

CSS Level 2 :lang()  nach oben

Die Psuedo-Klasse :lang() bezieht sich auf die (definierte) Sprache eines Elementes. Diese Sprache muss dazu als Sprach-Code in den Klammern notiert werden. Beispiel:

P:lang(de) { ... }
/*Alle Elemente P mit deutscher Sprachdefinition*/

P:lang(en-US) { ... }
/*Alle Elemente P mit US-englischer Sprachdefinition*/

CSS Level 2 :first-child  nach oben

Die Pseudo-Klasse :first-child beschreibt das Element, wenn es das erste "Kind" eines anderen Elements ist. Alle zweiten, dritten, vierten (usw.) "Kinder" werden somit ausgeklammert. Beispiel:

LI:first-child { ... }
/*Alle Elemente LI die das erste "Kind" eines Elementes sind.*/

<!-- in HTML: -->
<ul>
 <li>erstes Kind</li>
 <li>zweites Kind</li>
 <li>drittes Kind</li>
 ...
</ul>

CSS Level 2 :left und :right  nach oben

Die Pseudo-Klassen :left und :right dienen der Definition von Dokumentvarianten bei denen ein Seitenumbruch stattfindet (z.B. beim Ausdruck des Dokumentes). :left und :right beschreiben dabei die Lage der Seite, also wie das Dokument aussehen soll, wenn es als rechte (:right) oder linke (:left) Seite ausgedruckt werden soll. Dies könnte z.B. dann eine Rolle spielen, wenn das Ausgedruckte Dokument abgeheftet werden soll - dann wäre es somit möglich beispielsweise immer auf der Seite des Blattes auf der das Blatt gelocht werden soll den Rand etwas weiter zu definieren, so dass erstens beim Lochen keine Buchstaben mit weggelocht werden und zweitens der andere Rand dennoch genau mit dem Blatt abschließt. Es sind aber auch andere Einsatzgebiete denkbar. Die folgende Grafik soll dies verdeutlichen:

Verwendung der Pseudo-Klassen :left und :right
Darstellung: Verwendung der Pseudo-Klassen :left und :right

Beispiel:

@page :left { margin-right:3cm; margin-left:2cm; }
@page :right { margin-right:2cm; margin-left:3cm; }

CSS Level 2 :first  nach oben

:first beschreibt den Ausdruck bzw. die Darstellung der ersten Seite des Dokuments. So wäre es denkbar beispielsweise hier (auf der Ersten Seite) den Rand etwas breiter zu gestalten, sodass sich diese Seite optisch merklich von den anderen abhebt. Es sind aber auch andere Einsatzgebiete denkbar. Beispiel:

@page :first { margin: 25%; }

Verknüpfung  nach oben

Wenn Pseudo-Klassen mit Elementen verknüpft werden, ist dies recht einfach (Elementname:Klasse). Bei weiteren Klassifizierungen des Elements ist darauf zu achten, dass die Pseudo-Klasse wiederum hinter der Klassifizierung zu stehen hat. Beispiel:

A#abc:active { ... }
/*Alle Elemente A der ID abc die aktiv sind*/

TABLE INPUT.def:focus { ... }
/*Alle Elemente INPUT die innerhalb eines Elements TABLE liegen,
  der Klasse def angehören und den Fokus besitzen*/



« zurück weiter »
Bewerten

 

CSS

.Autor:Jan Winkler.
. Bewertung:
CSS: Pseudo-Klassen HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 450 Beiträge im CSS Forum .

Navigation

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum CSS Forum »


 
     
 

Anzeige