Hilfe
Neues Thema
Antworten
Hallo zusammen,
<ul>
<li>
<a href="JO">
test
</a>
</li>
</ul>
folgende Selektoren:
.menu ul li a:hover {}
.menu ul li:hover > a {}
Welcher Selektor hat jetzt Einfluss auf den Link und warum?
und: welches element muss in der Klasse menu sein? das ul oder das übergeordnete?
danke!!!
grüße
XD
CSS Selektoren unterschied?
#1
XDestroy 
geschrieben 03. März 2011 - 22:06
Nach oben
#2 _gibbons_
geschrieben 03. März 2011 - 22:15
In diesem Fall ist es .menu ul li a:hover {}
a ist immer für Links zuständig. Sei es a: für alle nicht genauer klassifizierte Links oder a.klasse: für klassifizierte Links (wenn man z.B. Links in mehreren Farben und Größen haben möchte.)
a ist immer für Links zuständig. Sei es a: für alle nicht genauer klassifizierte Links oder a.klasse: für klassifizierte Links (wenn man z.B. Links in mehreren Farben und Größen haben möchte.)
Dieser Beitrag wurde von gibbons bearbeitet: 03. März 2011 - 22:17
#3
XDestroy
geschrieben 03. März 2011 - 22:23
aber warum? wieso nicht das andere? ist das nicht beides das exakt gleiche?
und wie ist das mit der menu klasse?
grüße
XD
und wie ist das mit der menu klasse?
grüße
XD
#4 _gibbons_
geschrieben 03. März 2011 - 22:32
Die Klasse .menu sagt erstmal nichts aus.
Ich kann die Klasse auch "Rotzefoz" nennen, deswegen wäre sie nicht mehr oder weniger Funktionsfähig.
Dieser Teil hat mit CSS erst mal gar nichts zu tun, das ist HTML in reinster Form.
<ul> sagt eine Aufzählung aus, <li> sind die einzelnen Aufzählunspunkte.
<a href="JO"> ist ein nicht klassifizierter Link. Ein klassifizierter Link sähe so aus:
<a href="http://..." claas="rotzefoz">. Erst durch das klassifizieren einer Klasse claas="rotzefoz" oder einer ID id="rotzefoz" bekommen CSS Werte ihre Funktion.
somit könntest dann folgendes CSS Script schreiben:
a.rotzefoz:hover {color:#000}
Bedeutet: Klasse rotzefoz wird bei rollover schwarz (#000). In diesem Falle ist es der Link, weil wir den Link mit claas="rotzefoz" klassifiziert haben
das .menu erfüllt in dem von dir geposteten Script keinen Zweck, da es nirgends klassifiziert worden ist.
Ich hoffe das war einigermaßen verständlich.
Ich kann die Klasse auch "Rotzefoz" nennen, deswegen wäre sie nicht mehr oder weniger Funktionsfähig.
Zitat
<ul>
<li>
<a href="JO">
test
</a>
</li>
</ul>
<li>
<a href="JO">
test
</a>
</li>
</ul>
Dieser Teil hat mit CSS erst mal gar nichts zu tun, das ist HTML in reinster Form.
<ul> sagt eine Aufzählung aus, <li> sind die einzelnen Aufzählunspunkte.
<a href="JO"> ist ein nicht klassifizierter Link. Ein klassifizierter Link sähe so aus:
<a href="http://..." claas="rotzefoz">. Erst durch das klassifizieren einer Klasse claas="rotzefoz" oder einer ID id="rotzefoz" bekommen CSS Werte ihre Funktion.
somit könntest dann folgendes CSS Script schreiben:
a.rotzefoz:hover {color:#000}
Bedeutet: Klasse rotzefoz wird bei rollover schwarz (#000). In diesem Falle ist es der Link, weil wir den Link mit claas="rotzefoz" klassifiziert haben
das .menu erfüllt in dem von dir geposteten Script keinen Zweck, da es nirgends klassifiziert worden ist.
Ich hoffe das war einigermaßen verständlich.
Dieser Beitrag wurde von gibbons bearbeitet: 03. März 2011 - 22:42
#5
XDestroy
geschrieben 03. März 2011 - 22:44
das </a> ist doch vorhanden? :-)
also was ich mich frage ist, worauf sich das .menu denn beziehen würde, wenn ein element klassifiziert worden wäre.
also angenommen das element <ul class=rotzefotz> und das element <ul class=menu> wären vorhanden.
würde der selektor auch <ul class rotzefotz> mitnehmen? ja, oder?
konkret: das voran gestellte .menu bedeutet: "parent-element muss klasse menu haben"?
worauf bezieht sich das .menu?
und warum wird denn a:hover selektiert? firebug selektiert eben genau das gegenteil...
also was ich mich frage ist, worauf sich das .menu denn beziehen würde, wenn ein element klassifiziert worden wäre.
also angenommen das element <ul class=rotzefotz> und das element <ul class=menu> wären vorhanden.
würde der selektor auch <ul class rotzefotz> mitnehmen? ja, oder?
konkret: das voran gestellte .menu bedeutet: "parent-element muss klasse menu haben"?
worauf bezieht sich das .menu?
und warum wird denn a:hover selektiert? firebug selektiert eben genau das gegenteil...
#6 _gibbons_
geschrieben 03. März 2011 - 22:51
es wäre deutlich leichter wenn mir der gesamte Code zur Verfügung stehen würde, gib doch mal einen Link oder sowas daher, dann kann man in die Materie besser einsteigen.
das mit dem /a hab ich schon weg gemacht, ist mir irgendwie entfallen.
Wie bereits versucht zu erklären: Das .menu bezieht sich auf gar nichts, weil es nicht klassifiziert worden ist (in dem von dir geposteten codeschnipsel).
Bei dieser Annahme, zu diesem Codeschnipsel, für <ul> würde das dann so aussehen:
<ul class="rotzefotz menu">
das mit dem /a hab ich schon weg gemacht, ist mir irgendwie entfallen.
Wie bereits versucht zu erklären: Das .menu bezieht sich auf gar nichts, weil es nicht klassifiziert worden ist (in dem von dir geposteten codeschnipsel).
Zitat
also angenommen das element <ul class=rotzefotz> und das element <ul class=menu> wären
Bei dieser Annahme, zu diesem Codeschnipsel, für <ul> würde das dann so aussehen:
<ul class="rotzefotz menu">
Dieser Beitrag wurde von gibbons bearbeitet: 03. März 2011 - 22:53
#7
Holger_N
- Gruppe: aktive Mitglieder
- Beiträge: 5.170
- Beigetreten: 11. September 10
- Reputation: 458
- Geschlecht:Männlich
geschrieben 03. März 2011 - 22:58
Zitat (XDestroy: 03.03.2011, 22:44)
worauf bezieht sich das .menu?
In deinem Beispiel auf gar nix. Du müsstest irgendein Element in deinem html-Teil mit class="menu" bezeichnen, dann würde sich das auf alle Links in Listen in diesem Element beziehen was du da geschrieben hast.
schreib einfach:
a {x}
a:hover {y}
dann passiert x bei allen Links und y wenn du drüber gehst mit der Maus aber wie gesagt bei allen Links auf der Seite oder schreib
li a {x}
li a:hover {y}
dann passiert es bei allen Links in Listen
oder du vergibst Klassen oder ids und dann kannst du zuordnen in welchen Listen das passieren soll.
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
#8
XDestroy
geschrieben 03. März 2011 - 23:14
ich kann mir nicht helfen, es funktioniert einfach net 
(((
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Einbindung per 'style'-Element</title>
<style type="text/css">
.menu ul li a:hover
{
color: green;
}
</style>
</head>
<body>
<p class="menu">
<ul>
<li>
<a href="jo">link</a>
</li>
</ul>
</p>
</body>
(((<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Einbindung per 'style'-Element</title>
<style type="text/css">
.menu ul li a:hover
{
color: green;
}
</style>
</head>
<body>
<p class="menu">
<ul>
<li>
<a href="jo">link</a>
</li>
</ul>
</p>
</body>
#9 _gibbons_
geschrieben 03. März 2011 - 23:21
Zitat
<body>
<p class="menu">
<ul>
<li>
<a href="jo">link</a>
</li>
</ul>
</p>
</body>
<p class="menu">
<ul>
<li>
<a href="jo">link</a>
</li>
</ul>
</p>
</body>
Was soll denn dieses <p class="menu"> da?
Erkläre uns mal was dein Ziel ist.
#10
XDestroy
geschrieben 03. März 2011 - 23:22
naja der absatz soll halt die klasse menu haben...
#11 _gibbons_
geschrieben 03. März 2011 - 23:25
Okay... Der Absatz hat die Klasse menu. Aber warum soll der Absatz überhaupt eine Klasse haben? Eine Klasse setze ich nur, wenn ich dahinter etwas verfolge. Laut deinem CSS Code soll der Text in der Klasse Grün sein.
Zumindest interpretiere ich das erstmal so. Ist dies das Ziel?
Editgrund: Korrektur
Zumindest interpretiere ich das erstmal so. Ist dies das Ziel?
Editgrund: Korrektur
Dieser Beitrag wurde von gibbons bearbeitet: 03. März 2011 - 23:27
#12
XDestroy
geschrieben 03. März 2011 - 23:26
ne nur links, die in einem li sind, dass in einem ul ist, dass in einem element der klasse menu ist. in diesem fall der absatz.
#13 _gibbons_
geschrieben 03. März 2011 - 23:31
okay. Und was soll beim hover passieren? Denn bei der derzeitigen Konstellation hat das hover keine Auswirkung.
#14
XDestroy
geschrieben 04. März 2011 - 01:01
naja die farbe soll grün werden...
#15 _gibbons_
geschrieben 04. März 2011 - 10:04
Also von schwarz auf grün bei rollover?
Zitat
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Einbindung per 'style'-Element</title>
<style type="text/css">
.menu:hover {
color: green;
}
</style>
</head>
<body>
<p>
<ul>
<li><a href="jo" class="menu">link 1</a></li>
<li><a href="jo" class="menu">link 2</a></li>
<li><a href="jo" class="menu">link 3</a></li>
</ul>
</p>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Einbindung per 'style'-Element</title>
<style type="text/css">
.menu:hover {
color: green;
}
</style>
</head>
<body>
<p>
<ul>
<li><a href="jo" class="menu">link 1</a></li>
<li><a href="jo" class="menu">link 2</a></li>
<li><a href="jo" class="menu">link 3</a></li>
</ul>
</p>
</body>
Dieser Beitrag wurde von gibbons bearbeitet: 04. März 2011 - 10:07
