Unterschied in CSS definiton?

[alfred]

hallo forum

ich beschäftige mich neuerdings mit css.
nun habe ich eine grundsätzliche frage:

gibt es einen unterschied zwischen dieser definition:

a.ExtLink , a.ExtLink:hover , a.ExtLink:visited , a.ExtLink:active {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}

und dieser:

.ExtLink A:link  {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}
.ExtLink A:hover {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}
.ExtLink A:visited {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}
.ExtLink A:active {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}

oder ist beides dasselbe? oder gibts unterschiede je nach betriebssystem und browser? ich hab nur ie und winxp.

danke für die hilfe
alfred

[Zeromancer]

Hallo alfred,

theoretisch:

a.ExtLink , a.ExtLink:hover , a.ExtLink:visited , a.ExtLink:active {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}

Alle a-Elemente mit der Klasse "ExtLink" kriegen die Formatierungen, egal wo sie sich befinden. Das Elternelement ist egal.

.ExtLink A:link  {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}

Alle a-Elemente, die sich in einem Element mit der Klasse "ExtLink" befinden, dies können <p>,<div>, <table> etc. sein, kriegen die Formatierung. Hierbei wird auf das Eltern-Element Bezug genommen.

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

Alle a-Elemente, die sich in einem Element mit der Klasse "ExtLink" befinden, dies können <p>,<div>, <table> etc. sein, kriegen die Formatierung. Hierbei wird auf das Eltern-Element Bezug genommen.

Nein, nicht auf das Eltern-Element, sondern auf ein beliebiges Vorfahren-Element.
Das Leerzeichen ist der descendent-Selektor, nicht der Child-Selektor (das wäre das > Zeichen).

cu,
Andreas

[Zeromancer]

Hallo,

Nein, nicht auf das Eltern-Element, sondern auf ein beliebiges Vorfahren-Element.
Das Leerzeichen ist der descendent-Selektor, nicht der Child-Selektor (das wäre das > Zeichen).

Gut zu wissen, für mich in der Praxis _bisher_ kaum relvant. Danke.

Mit freundlichen Grüßen

André

[alfred]

hallo zeromancher

nur um zu sehen ob ich es kapiert habe...

dies bedeutet also, dass ich so:

a.ExtLink , a.ExtLink:hover , a.ExtLink:visited , a.ExtLink:active {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}

jedem link die klasse ExtLink zuweisen muss, und so:

.ExtLink A:link  {
font-family : arial, verdana, times, serif;
font-size : 10px;
color : #000000;
text-decoration : none;
}

nur dem table und alle links die sich im table befinden, übernehmen automatisch die ExtLink klasse, wobei ich dem table jeder variante der ExtLink klasse zuweisen muss? (hover, visited, active etc.)

gruss alfred

[Zeromancer]

Hallo alfred,

a.ExtLink:link, a.ExtLink:visited, a.ExtLink:hover

werden separat gekennzeichnet und können sich überall innerhalb des Dokumentes befinden.

table.ExtLink a:link, a:visited, a:hover

bezieht sich auf alle a-Elemente innerhalb der Tabelle mit der Klasse "ExtLink"

In Selfhtml findest du weitere Angaben  unter http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

Und 'tschuldigung für die Aussage mit den Eltern-Elementen. Andreas hat natürlich recht. Habe es grad noch mal nachgelesen.

Mit freundlichen Grüßen

André

[Detlef G.]

Hallo Zeromancer

table.ExtLink a:link, a:visited, a:hover

table.ExtLink a:link, table.ExtLink a:visited, table.ExtLink a:hover

bezieht sich auf alle a-Elemente innerhalb der Tabelle mit der Klasse "ExtLink"

Auf Wiederlesen
Detlef

[Zeromancer]

Hallo Detlef,

table.ExtLink a:link, table.ExtLink a:visited, table.ExtLink a:hover

das wird ja richtig produktiv heute. ;-)

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

hallo forum

ich beschäftige mich neuerdings mit css.
nun habe ich eine grundsätzliche frage:

gibt es einen unterschied zwischen dieser definition:

a.ExtLink , a.ExtLink:hover , a.ExtLink:visited , a.ExtLink:active {

Das wählt ein a-Element aus, das im class-Attribut die Klasse ExtLink stehen hat
das erste gilt für alle diese a-Elemente,
das zweite für alle diese a-Elemente, über denen sich der Mauszeiger befindet,
das dritte für diese a-Elemente, falls sie ein href-Attribut haben und die im href-Attribut angegebene URL vom Browser als bereits besucht betrachtet wird
das vierte für alle diese a-Elemente im Moment der Aktivierung (sprich: zwischen Mausknopf drücken und Mausknopf loslassen)

.ExtLink A:link  {

Das wählt ein a-Element mit href-Attribut aus, falls die im href-Attribut angegebene URL vom Browser NICHT als bereits besucht betrachtet wird, und falls sich das a-Element beliebig tief verschachtelt innerhalb eines anderen Elements,das im class-Attribut die Klasse ExtLink stehen hat, befindet.

.ExtLink A:hover {

oder ist beides dasselbe?

Nein, selbstverständlich nicht.

cu,
Andreas

[alfred]

hallo andreas

aha, ich dachte bloss, dass ich die erste variante der definition gebrauchen kann, wenn alle zustände des links die gleiche auszeichnung haben und die zweite variante gebrauche, wenn hover, active, visited etc. verschiedene auszeichnungen haben.

gruss alfred

[MudGuard]

Hi,

aha, ich dachte bloss, dass ich die erste variante der definition gebrauchen kann, wenn alle zustände des links die gleiche auszeichnung haben und die zweite variante gebrauche, wenn hover, active, visited etc. verschiedene auszeichnungen haben.

Ob Du die Rulesets für verschiedene Selektoren (per ,) zusammenfaßt oder nicht, hat keinen Einfluß darauf, was die einzelnen Selektoren auswählen.

cu,
Andreas