[CSS] :first-child UND :after?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [CSS] :first-child UND :after?

    Hallo, ich habe folgendes Problem:
    In einem <li>-Tag habe ich mehrere Links, hinter dem ersten davon soll etwas stehen, was ich mit CSS festlegen möchte. Geht das überhaupt?

    Folgendes funktioniert nicht, auch wenn ich :after und :first-child vertausche o.Ä.:

    Quellcode

    1. li:a:after:first-child {
    2. content: "Text";
    3. }


    Gruß zichy

  • Das wird so leider nicht funktionieren. Ersteinmal gibt es kein "li:a". Zudem sprichst du mit first-child das erste Element an, dass innerhalb eines anderen liegt. Wolltest du folglich das erste a-Tag innerhalb des li-Tags bekommen, müsstest du eher li:first-child schreiben, womit aber noch nicht bestimmt ist, was für ein Typ von Kinderelement das sein wird. Und da kommen wir zu der Problematik. Das kannst du mit CSS leider nicht bestimmen. Soll heißen, eine Kombination aus :first-child und einer Bedingung ist nicht möglich.

    Mein Tipp dazu:
    Lass die Finger von solchen Selektoren solange noch immer 60 % der Idioten da draußen mit dem IE 6 im Netz unterwegs ist. Dein Problem lässt sich einfacher lösen, in dem du dem ersten Element im li-Tag einfach einen class-Attribut gibst. Leider musst du dann aber immer noch den :after-Selektor benutzen, der im angesprochenen Browser genau so "gut" funktioniert.

    Beispiel:

    Quellcode

    1. <!-- ... -->
    2. <li>Inhalt <a href="#" class="first-child">Test</a></li>


    Je nachdem wie viel Ahnung du in Sachen PHP oder JavaScript hast, ist es wohl insgesamt empfehlenswerter, wenn du hier die Sache mit einer Programmiersprache löst und die Sache soweit möglich von der Art des Browser löst.

    PS: css4you.de/browsercomp.html/standardbrowser/ - Die Seite ist in Sache CSS jedoch ohnehin ein Bookmark wert!