nicht angemeldet
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Matthias Apsel
Hallo allerseits,
ich sitze gerade an einer Aufgabe für die Uni, bei der ich trotz vorhandener Lösung einige Schwierigkeiten habe:
"Viele strukturelle Pseudoklassen wie :first-child, :nth-last-child, :first-of-type, :nth-of-type beziehen sich auf die Position eines Elements in einer Sequenz. CSS zählt Positionen nach einem sinnvollen Prinzip, andere Formalismen zählen nach einem anderen sinnvollen Prinzip.
a) Angenommen, Sie könnten weder ausprobieren noch nachschlagen, wie :first-of-type wirkt, sondern müssten überlegen, was plausibel ist. Dann kämen zwei verschiedene Mengen von Elementen in Frage, die der Selektor ul li:first-of-type in sinnvoller Weise aus dem folgenden Dokument auswählen könnte. Welche und warum?
b) Welche dieser beiden Mengen von Elementen wird von CSS tatsächlich selektiert, wenn ul li:first-of-type auf das folgende Dokument angewandt wird?"
<!DOCTYPE html PUBLIC "...">
<html>
<head>
<style type="text/css">
li { color: red; }
</style>
</head>
<body>
<ul>
<li id="A" class="u">1</li>
<li>
<ol>
<li id="B" class="u">2.1</li>
<li id="C" class="g">2.2</li>
<li id="D" class="u">2.3</li>
<li id="E" class="g">2.4</li>
</ol>
</li>
<li id="F" class="u">3</li>
</ul>
</body>
</html>
Lösung:
a)
1. Zählweise relativ zum vorherigen Selektor.
2. Zählweise relativ zum jeweiligen Elternelement, das gar nicht im Selektor vorkommen muss.
b) CSS zählt relativ zum jeweiligen Elternelement.
Meine Fragen:
Ich bitte wirklich ganz dringend um Hilfe, da ich hier schon seit einigen Stunden davor sitze und absolut nicht weiterkomme.
Vielen Dank für Eure Mühe und Eure Unterstützung!
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
Ich bitte wirklich ganz dringend um Hilfe, da ich hier schon seit einigen Stunden davor sitze und absolut nicht weiterkomme.
Schau dich mal im wiki um.
Matthias
Om nah hoo pez nyeetz, Matthias Apsel!
Schau dich mal im wiki um.
Ergänzend könnte auch noch der Nachfahrenselektor interessant sein, denn er selektiert in deinem Beispiel _alle_ li-Elemente, die innerhalb einer ul vorkommen, also auch die, die innerhalb der ul und dort innerhalb einer weiteren Liste vorkommen.
Matthias
Hi,
a) Angenommen, Sie könnten weder ausprobieren noch nachschlagen, wie :first-of-type wirkt, sondern müssten überlegen, was plausibel ist. Dann kämen zwei verschiedene Mengen von Elementen in Frage, die der Selektor ul li:first-of-type in sinnvoller Weise aus dem folgenden Dokument auswählen könnte. Welche und warum?
b) Welche dieser beiden Mengen von Elementen wird von CSS tatsächlich selektiert, wenn ul li:first-of-type auf das folgende Dokument angewandt wird?"
Beide Fragen fragen nach Mengen von Elementen.
Lösung:
a)
- Zählweise relativ zum vorherigen Selektor.
- Zählweise relativ zum jeweiligen Elternelement, das gar nicht im Selektor vorkommen muss.
b) CSS zählt relativ zum jeweiligen Elternelement.
Ist das ernsthaft deine Antwort auf Fragen, die explizit von dir eine Menge von Elementen genannt bekommen wollen?
- Ich habe einen kleinen Versuch gemacht und innerhalb des <style>-Tags "ul li:first-of-type { color: blue; }" hinzugefügt und im neuesten Firefox-Release werden "1" und "2. 2.1" blau angezeigt, was mich sehr überrascht. Warum wird nicht nur die "1" blau angezeigt?
Weil auch das LI-Element, das "2.1" enthält, das erste seines Typs auf seiner „Ebene“ ist. Und Nachfahre eines UL-Elements ist es ebenso, so dass auch der erste Teil dieses Selektors „erfüllt“ ist.
MfG ChrisB
Hi Chris,
Ist das ernsthaft deine Antwort auf Fragen, die explizit von dir eine Menge von Elementen genannt bekommen wollen?
exakt so hat es der Tutor in der Übung formuliert (er erstellt übrigens auch die Aufgaben).
- Ich habe einen kleinen Versuch gemacht und innerhalb des <style>-Tags "ul li:first-of-type { color: blue; }" hinzugefügt und im neuesten Firefox-Release werden "1" und "2. 2.1" blau angezeigt, was mich sehr überrascht. Warum wird nicht nur die "1" blau angezeigt?
Weil auch das LI-Element, das "2.1" enthält, das erste seines Typs auf seiner „Ebene“ ist. Und Nachfahre eines UL-Elements ist es ebenso, so dass auch der erste Teil dieses Selektors „erfüllt“ ist.
Jetzt ist mir die Aufgabe klar geworden: <ol> ist ja auch ein Elternelement und da das <li> mit "2.1" das Kind-Element ist, wird es blau angezeigt.
Danke an Dich und Matthias! :-)
Zum geposteten Code: sehe ich das richtig, dass der Code unvollständig ist, da die Klassen wie "u", "g", usw. im <style>-Tag gar nicht definiert wurden?
MfG ChrisB
Gruß
HTML-Newbie
Hi,
Ist das ernsthaft deine Antwort auf Fragen, die explizit von dir eine Menge von Elementen genannt bekommen wollen?
exakt so hat es der Tutor in der Übung formuliert (er erstellt übrigens auch die Aufgaben).
Trotzdem würde ich dir raten zu versuchen Fragen so zu beantworten, dass die Antwort auch zur Frage passt.
Jetzt ist mir die Aufgabe klar geworden: <ol> ist ja auch ein Elternelement und da das <li> mit "2.1" das Kind-Element ist, wird es blau angezeigt.
Nein.
Das LI ist das erste seines Typs, *und* es ist Nachfahre eines UL-Elements – *deshalb* trifft der Selektor zu.
Das OL-Element hat in diesem Fall nichts wesentliches damit zu tun.
MfG ChrisB
Hi,
Hi Chris,
Trotzdem würde ich dir raten zu versuchen Fragen so zu beantworten, dass die Antwort auch zur Frage passt.
ich bin mit Dir absolut einer Meinung.
Das LI ist das erste seines Typs, *und* es ist Nachfahre eines UL-Elements – *deshalb* trifft der Selektor zu.
Das OL-Element hat in diesem Fall nichts wesentliches damit zu tun.
Danke für die Klarstellung. Was wäre Deiner Meinung nach eigentlich die "Zählweise relativ zum vorherigen Selektor"?
MfG ChrisB
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
Danke für die Klarstellung. Was wäre Deiner Meinung nach eigentlich die "Zählweise relativ zum vorherigen Selektor"?
li:first-child
* es _könnte_ das erste Kind des li-Elementes _sein_ (ist wohl das, was mit relativ zum voherigen gemeint ist)
* _ist_ ein li-Element, welches selbst das erste Kind seines Elternelements ist
Matthias
Hi,
Was wäre Deiner Meinung nach eigentlich die "Zählweise relativ zum vorherigen Selektor"?
Eine wenig sinnvolle Formulierung …?
MfG ChrisB
Om nah hoo pez nyeetz, HTML-Newbie!
Zum geposteten Code: sehe ich das richtig, dass der Code unvollständig ist, da die Klassen wie "u", "g", usw. im <style>-Tag gar nicht definiert wurden?
Klassen sind ein Konzept in HTML. Im Style-_Element_ (Unterschied Tag-Element) werden keine Vereinbarungen zur besonderen Gestaltung von Elementen, die dieser Klasse angehören, getroffen.
Matthias
Om nah hoo pez nyeetz, HTML-Newbie!
Hi Matthias,
Zum geposteten Code: sehe ich das richtig, dass der Code unvollständig ist, da die Klassen wie "u", "g", usw. im <style>-Tag gar nicht definiert wurden?
Klassen sind ein Konzept in HTML. Im Style-_Element_ (Unterschied Tag-Element) werden keine Vereinbarungen zur besonderen Gestaltung von Elementen, die dieser Klasse angehören, getroffen.
sorry, mir sind die Fachbegriffe noch nicht ganz geläufig...
Meine Frage nochmals präziser:
Zwischen den beiden style-Tags müsste doch etwas wie (willkürliches Beispiel) "li.u { color: blue; }" stehen, damit die Verwendung von class in den Zeilen 13-16 überhaupt einen Sinn ergibt?
Matthias
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
Zwischen den beiden style-Tags müsste doch etwas wie (willkürliches Beispiel) "li.u { color: blue; }" stehen, damit die Verwendung von class in den Zeilen 13-16 überhaupt einen Sinn ergibt?
In deinem Beispiel könnte man auf die Verwendung von Klassen verzichten.
Aber nicht jede Klasse oder ID wird benötigt, um CSS-Selektoren anwenden zu können, auch die Identifikation für JavaScript kann über Klassenattribute laufen.
Matthias
Hi,
Zwischen den beiden style-Tags müsste doch etwas wie (willkürliches Beispiel) "li.u { color: blue; }" stehen, damit die Verwendung von class in den Zeilen 13-16 überhaupt einen Sinn ergibt?
Nein.
Löse dich von dem Gedanken, dass Klassen oder IDs primär dazu da wären, um Elemente mit CSS anzusprechen.
Sie sind dazu da, ein Element eindeutig identifizierbar zu machen oder als zu einer Klasse von Elementen zugehörig zu kennzeichnen.
Die Gründe, warum man das tun möchte, können vielfältig sein – vom Wunsch, etwas mehr Aussage über die Bedeutung des jeweiligen Inhaltes zusätzlich zum Ausdruck zu bringen, über das Ansprechen mit JavaScript bis hin auch (aber eben nicht nur) zu der Möglichkeit, sie über Alleinstellungsmerkmale oder Gemeinsamkeiten per CSS gezielt selektieren zu können.
In dem dir vorliegenden Beispiel haben sie möglicherweise keinerlei weitere Bedeutung (vielleicht wird der selbs HTML-Code später noch in anderem Zusammenhang wieder als Beispiel verwendet) – oder auch nur die, dir das was ich gerade schrieb klar zu machen :-)
MfG ChrisB
Vielen Dank für Eure gute Hilfe, Chris und Matthias!
Eine weitere Aufgabe richtet sich nach dem eingangs geschriebenen Code:
"Machen Sie sich mit folgenden Simple-Selektoren in CSS vertraut: Typ-Selektoren wie li selektieren alle Elemente dieses Namens im Dokument. Wegen Zeile 5 des Dokuments werden also unter anderem Zeilen 10 und 19 im Browser in roter Schrift angezeigt.
Attribut-Selektoren wie [class="g"] selektieren Elemente mit passendem Attribut.
Typ- und Attribut-Selektoren können gemeinsam vorkommen. Simple-Selektoren lassen sich kombinieren:
elem > childelem Kind
elem descelem Nachfahre
elem + nextsiblingelem nächstes Geschwister
elem ~ latersiblingelem späteres Geschwister
a) Drücken Sie die Selektoren #E und .g mit Attribut-Selektoren aus.
b) Selektieren Sie alle li-Elemente an ungerader Position in der jeweiligen Liste im Dokument.
c) Geben Sie die Zeilen der Elemente an, die von * > ul ol > li + li.u selektiert werden.
d) Geben Sie die Zeilen der Elemente an, die von * > ul li:nth-child(4n+3) selektiert werden."
Auch hier ist die Lösung vorhanden, ehe ich mich ihr aber widme, habe ich eine Frage zur Aufgabenstellung. Kann es sein, dass der Attribut-Selektor [class="g"] falsch ist und stattdessen [class~='g'] heißen müsste, wie unter http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren angegeben?
Nochmals vielen Dank!
Gruß
HTML-Newbie
Hi,
Kann es sein, dass der Attribut-Selektor [class="g"] falsch ist und stattdessen [class~='g'] heißen müsste, wie unter http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren angegeben?
An der verlinkten Stelle findest du mehrere Attribut-Selektoren aufgelistest, die alle den Inhalt des Attributes auf unterschiedliche Weise vergleichen.
MfG ChrisB
@@HTML-Newbie:
nuqneH
a) Drücken Sie die Selektoren #E und .g mit Attribut-Selektoren aus.
[…] Kann es sein, dass der Attribut-Selektor [class="g"] falsch ist und stattdessen [class~='g'] heißen müsste, wie unter http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren angegeben?
Ja. Wobei die Erklärung in der Wikipedia zu '~=' Unsinn ist. Das beste daran ist der Link zur CSS-Spec.
Der Selektor '#E' lässt sich übrigens nicht durch einen gleichwertigen Attributselektor ausdrücken.
Qapla'
Hi,
Der Selektor '#E' lässt sich übrigens nicht durch einen gleichwertigen Attributselektor ausdrücken.
laut Lösung/Tutorium geht das mit [id="E"]. Ist das falsch?
Qapla'
Gruß
HTML-Newbie
Hi,
Der Selektor '#E' lässt sich übrigens nicht durch einen gleichwertigen Attributselektor ausdrücken.
laut Lösung/Tutorium geht das mit [id="E"]. Ist das falsch?
Selektiert die gleichen Elemente, allerdings mit einer anderen Spezifität.
~dave
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Ja. Wobei die Erklärung in der Wikipedia zu '~=' Unsinn ist.
Jetzt nicht mehr. '|=' war auch nicht richtig.
Matthias
Grüße dich, HTML-Newbie,
Auch hier ist die Lösung vorhanden, ehe ich mich ihr aber widme, habe ich eine Frage zur Aufgabenstellung. Kann es sein, dass der Attribut-Selektor [class="g"] falsch ist und stattdessen [class~='g'] heißen müsste, wie unter http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren angegeben?
Es gibt auch ein SELFHTML-Wiki, das dir vielleicht weiterhelfen kann.
Gruß, Daniel