nicht angemeldet
Frage an CSS Profis - bestimmtes Element finden...
0 0 1
0
0 1 
Der Martin
Frage an CSS Profis - bestimmtes Element finden...
Matthias ApselMoin,
es gibt ja einige Tricks, eventuell kann wer helfen, aber erstaml der Quellcode:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.sub > a::after {content: ' (mit den Unterpunkten)';}
</style>
<head>
</body>
<ul>
<li><a href="#">Punkt 1</a></li>
<li class="sub">
<a href="#">Punkt 2</a>
<ul>
<li><a href="#">Punkt 2.1</a></li>
<li><a href="#">Punkt 2.2</a></li>
</ul>
</li>
<li><a href="#">Punkt 3</a></li>
</ul>
</body>
</html>
Ich möchte hinter dem „Punkt 2“ nun Content automatisch erzeugen, bisher klappt es nur, wenn ich dem „li“ die class „sub“ gebe. Es soll (hat mir wer gesagt, aber leider nicht wie) möglich sein, festzustellen, dass das „li“ nicht nur einen „a“ sondern auch einen „ul“ Tag beinhaltet. So könnte man dann auf die class „sub“ verzichten, wenn es Unterelemente in der Liste gibt, würde der Content automatisch erzeugt. Geht das und wenn ja, kann mir wer verraten wie?
Lieben Gruß
Manuel
-
Ich möchte hinter dem „Punkt 2“ nun Content automatisch erzeugen, bisher klappt es nur, wenn ich dem „li“ die class „sub“ gebe. Es soll (hat mir wer gesagt, aber leider nicht wie) möglich sein, festzustellen, dass das „li“ nicht nur einen „a“ sondern auch einen „ul“ Tag beinhaltet.
Nein, das wäre dann ein parent-Selektor, der wurde schon häufiger diskutiert, aber hat es bisher nie in eine Spezifikation geschafft.
Wie auch immer, es gibt andere Möglichkeiten.
Ein wenig Inspiration:li:nth-of-type a(2)
li:nth-child a(2)li > a:first-child
-
Hupalla, da ist mir ein Fehler unterlaufen, so sollte es aussehen:
li:nth-of-type(2) a
li:nth-child(2) a-
Habe eine Lösung gefunden, wie findet hier das denn:
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> li a::after {content: ' (mit den Unterpunkten)';} li a:last-child::after {content: '';} </style> <head> </body> <ul> <li><a href="#">Punkt 1</a></li> <li> <a href="#">Punkt 2</a> <ul> <li><a href="#">Punkt 2.1</a></li> <li><a href="#">Punkt 2.2</a></li> <li class="subx"> <a href="#">Punkt 2.3</a> <ul> <li><a href="#">Punkt 2.3.1</a></li> <li><a href="#">Punkt 2.3.2</a></li> </ul> </li> <li><a href="#">Punkt 2.4</a></li> </ul> </li> <li><a href="#">Punkt 3</a></li> </ul> </body> </html>Klappt doch perfekt. :D
-
Om nah hoo pez nyeetz, nocheinPoet!
Klappt doch perfekt. :D
Ja, clever. Entweder es gibt die Konstruktion
<li><a>...</a></li>oder
<li> <a>...</a> <ul> ... </ul> </li>Es geht noch kürzer:
li > a:not(:last-child)::after {content: ' (mit den Unterpunkten)';}Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, nocheinPoet!
Klappt doch perfekt. :D
Ja, clever. Entweder es gibt die Konstruktion
<li><a>...</a></li>
> oder > ~~~html <li> > <a>...</a> > <ul> > ... > </ul> > </li>Es geht noch kürzer:
li > a:not(:last-child)::after {content: ' (mit den Unterpunkten)';}
> Matthias Perfekt, genau das: ~~~css li > a:not(:last-child)::after {content: ' (mit den Unterpunkten)';}habe ich gesucht.Hier habe ich es mal eingebaut und ein Menue geschraubt:
http://forum.de.selfhtml.org/?t=213417&m=1458963
Leider gibt es nun wieder ein anderes Problem, wird wohl ganz ohne JS nicht umzusetzen sein.
Gruß und Dank
Manuel
-
-
-
-
Ich möchte hinter dem „Punkt 2“ nun Content automatisch erzeugen, bisher klappt es nur, wenn ich dem „li“ die class „sub“ gebe. Es soll (hat mir wer gesagt, aber leider nicht wie) möglich sein, festzustellen, dass das „li“ nicht nur einen „a“ sondern auch einen „ul“ Tag beinhaltet.
Nein, das wäre dann ein parent-Selektor, der wurde schon häufiger diskutiert, aber hat es bisher nie in eine Spezifikation geschafft.
Wie auch immer, es gibt andere Möglichkeiten.
Ein wenig Inspiration:Was auch immer das bringen soll (auch nach Korrektur in deinem Folgepost) - du kannst unmöglich erkennen, ob das li-Element ein Kind vom Typ "ul" hat - es nützt nicht, wenn du im 2. li ein a-Element selektierst - damit umschiffst du nur das Problem und erzeugst eine Latte anderer: z.B. wenn sich das die Menüstruktur (z.B. durch ein CMS generiert) ändert, darfst du das CSS auch angreifen - das ist nicht sinn der Sache.
Die Krücke mit der Klasse ist da schon gut geeignet - die Klasse lässt sich vorab ins HTML einfügen (z.B. durch ein CMS in der routine der Menüerzeugung) oder aber nachträglich per JavaScript.
-
Ich möchte hinter dem „Punkt 2“ nun Content automatisch erzeugen, bisher klappt es nur, wenn ich dem „li“ die class „sub“ gebe. Es soll (hat mir wer gesagt, aber leider nicht wie) möglich sein, festzustellen, dass das „li“ nicht nur einen „a“ sondern auch einen „ul“ Tag beinhaltet.
Nein, das wäre dann ein parent-Selektor, der wurde schon häufiger diskutiert, aber hat es bisher nie in eine Spezifikation geschafft.
Wie auch immer, es gibt andere Möglichkeiten.
Ein wenig Inspiration:Was auch immer das bringen soll (auch nach Korrektur in deinem Folgepost) - du kannst unmöglich erkennen, ob das li-Element ein Kind vom Typ "ul" hat - es nützt nicht, wenn du im 2. li ein a-Element selektierst - damit umschiffst du nur das Problem und erzeugst eine Latte anderer: z.B. wenn sich das die Menüstruktur (z.B. durch ein CMS generiert) ändert, darfst du das CSS auch angreifen - das ist nicht sinn der Sache.
Die Krücke mit der Klasse ist da schon gut geeignet - die Klasse lässt sich vorab ins HTML einfügen (z.B. durch ein CMS in der routine der Menüerzeugung) oder aber nachträglich per JavaScript.
Echt schnell hier, Dank an Alle...
Es geht schon um die Generierung von Content, wenn die Punkte aus einer DB gegriffen werden, würde der Content automatisch generiert, mit der Lösung „class“ brauche ich eine Logik, die überprüft ob es Unterpunkte gibt, und dann die Klasse hinzufügt. Man könnte nun mit JS arbeiten, aber auch dass sollte vermieden werden.
Unterm Strich heißt das also, auf CSS4 warten und hoffen, dass es dann einen Parent Selektor gibt. Oder was wie „has Element of Type (x)“...
-
Hallo,
Es geht schon um die Generierung von Content, wenn die Punkte aus einer DB gegriffen werden, würde der Content automatisch generiert, mit der Lösung „class“ brauche ich eine Logik, die überprüft ob es Unterpunkte gibt, und dann die Klasse hinzufügt.
Das schreibe eine solche Logik beim Generieren des HTMLs.
Mit Klassen lässt sich die reine HTML-Auszeichnung weiter mit Bedeutung anreichern. Manche Schulen (SMACSS, OOCSS) gehen soweit, Typselektoren tendenziell oder ganz aus dem CSS zu verbannen, weil reine HTML-Struktur Schall und Rauch sei, Klassen aber eine spezifische Bedeutung ausdrücken (z.B. »Navigationspunkt mit Unternavigation«).
CSS-Selektoren werden durch sinnvolle Klassen gleich einfacher und eindeutiger. Komplexe CSS3-Selektoren sind selten das Mittel der Wahl. In den meisten Fällen sollte mit Klassen-, ID- und Typselektoren sowie Nachfolge- und Kindkombinatoren gearbeitet werden. (Manche grenzen das noch weiter ein.)
Wenn du eine hierarchische Navigation auszeichnest, so vergebe passende Klassen.
Grüße,
Mathias-
Om nah hoo pez nyeetz, molily!
Mit Klassen lässt sich die reine HTML-Auszeichnung weiter mit Bedeutung anreichern. Manche Schulen (SMACSS, OOCSS) gehen soweit, Typselektoren tendenziell oder ganz aus dem CSS zu verbannen, weil reine HTML-Struktur Schall und Rauch sei, Klassen aber eine spezifische Bedeutung ausdrücken (z.B. »Navigationspunkt mit Unternavigation«).
Ist nicht von der Hand zu weisen.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
Was auch immer das bringen soll (auch nach Korrektur in deinem Folgepost) - du kannst unmöglich erkennen, ob das li-Element ein Kind vom Typ "ul" hat
Das ist korrekt und das habe ich ja auch erwähnt. Aber wir schauen hier doch auch über den Tellerrand und unter gewissen Umständen könnten meine Vorschläge zumindest zielführend sein.
- es nützt nicht, wenn du im 2. li ein a-Element selektierst - damit umschiffst du nur das Problem und erzeugst eine Latte anderer: z.B. wenn sich das die Menüstruktur (z.B. durch ein CMS generiert) ändert, darfst du das CSS auch angreifen - das ist nicht sinn der Sache.
Das wären Umstände unter denen meine Vorschläge zugegeben nichts taugen würden.
-
-
-
Ich möchte hinter dem „Punkt 2“ nun Content automatisch erzeugen, bisher klappt es nur, wenn ich dem „li“ die class „sub“ gebe. Es soll (hat mir wer gesagt, aber leider nicht wie) möglich sein, festzustellen, dass das „li“ nicht nur einen „a“ sondern auch einen „ul“ Tag beinhaltet. So könnte man dann auf die class „sub“ verzichten, wenn es Unterelemente in der Liste gibt, würde der Content automatisch erzeugt. Geht das und wenn ja, kann mir wer verraten wie?
Du kannst (derzeit) nicht feststellen, ob ein Element ein (bestimmtes) Kind hat oder nicht, da es keinen Parent-Selektor/Kombinator gibt - der ist erst für Selectors Level 4 vorgesehen
Du kommst also um die Klasse nicht herum - du solltest sie allerdings sinnvollerweise "hassub" oder "haschild" oder ähnliches nennen, das ist schlüssiger :)
-
Hallo,
<li class="sub">
<a href="#">Punkt 2</a>
<ul>
<li><a href="#">Punkt 2.1</a></li>
<li><a href="#">Punkt 2.2</a></li>
</ul>
</li>geht es immer im eine solche Struktur? Also ein List Item mit einem a-Element (Element, nicht Tag), auf das unmittlebar noch ein ul-Element folgt?
Und könnte der generierte Content dann eventuell auch dem ul-Element zugeordnet werden?
Dann hätte ich vielleicht etwas ...
li a+ul::before { content: 'Generated Content'; }So long,
Martin--
Frage an Radio Eriwan: Kann man eigentlich ein guter Kommunist und gleichzeitig ein guter Christ sein?
Radio Eriwan antwortet: Im Prinzip ja - aber warum sollte man sich das Leben doppelt schwer machen?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(