Ankündigung

Einklappen
Keine Ankündigung bisher.

Selecoren und class namen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Selecoren und class namen

    Ich hab mal eine Verständnisfrage zu Selectoren "first-of-type" und "last-of-type"

    folgendes Beispiel:
    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .navitem:first-of-type {
      background: #ff0000;
    }
    
    </style>
    </head>
    <body>
    
    <ul>
            <li class="navitem">User</li>
            <li class="nav-trenner">|</li>
            <li class="navitem">Files</li>
            <li class="nav-trenner">|</li>
    </ul>
    
    </body>
    </html>
    alles wunderbar, aber füge ich noch ein li element vor allem andern ein mit der class nav-trenner geht es nicht mehr obwohl es nach wievor dann das erste element mit der class navitem ist.

    HTML-Code:
    <ul>
            <li class="nav-trenner">|</li>
            <li class="navitem">User</li>
            <li class="nav-trenner">|</li>
            <li class="navitem">Files</li>
            <li class="nav-trenner">|</li>
    </ul>
    Das treibt mich grade in den wahnsinn


  • #2
    https://developer.mozilla.org/de/doc...:first-of-type
    müsste laut docu alle anzeigen ..

    Kommentar


    • #3
      Ok die Lösung ist nicht first-of-type oder last-of-type sondern first und last als selector. Ich versteh es nur nicht, aber immerhin funktioniert es

      Kommentar


      • #4
        :first wird vom Firefox nicht unterstützt

        Kommentar


        • #5
          Zitat von grayson Beitrag anzeigen
          Ok die Lösung ist nicht first-of-type oder last-of-type sondern first und last als selector. Ich versteh es nur nicht, aber immerhin funktioniert es
          ehrlich, zeig mal!

          Kommentar


          • #6
            Aber nur zusammen mit @page für gedruckte Dokumente. Die normale Funktion zb. ul li:first-child funktioniert auch ganz normal im FireFox. Ich denk dies hat grayson falsch geschrieben?

            Kommentar


            • #7
              Zeichen32
              First-child kann er hier aber nicht anwenden weil die Childs sind die li vom ul.
              Ich hatte da mehrere Varianten ausprobiert und bin zu keinem zufriedenstellenden Ergebnis gekommen, warum auch, er kann ja einfach eine weitere klasse für das erste Element hinzufügen.
              Oder er macht das halt anders.

              Kommentar


              • #8
                Zitat von protestix Beitrag anzeigen
                Zeichen32
                First-child kann er hier aber nicht anwenden weil die Childs sind die li vom ul.
                Ich hatte da mehrere Varianten ausprobiert und bin zu keinem zufriedenstellenden Ergebnis gekommen, warum auch, er kann ja einfach eine weitere klasse für das erste Element hinzufügen.
                Oder er macht das halt anders.
                Okay, hab es nicht getestet. Auf der Seite stand nur das :first nur bei gedruckten Seiten funktioniert aber nicht im FireFox. Daher mein Gedanke ob nicht first-child gemeint war.

                Kommentar


                • #9
                  Ich erkläre es auch für grayson mal ein wenig ausführlicher.
                  Wenn ich nur eine Liste habe, alles gleich, dann kann ich mit Pseudoklassen arbeiten
                  HTML-Code:
                  <style>
                      ul li:first-child { background: #ff0000; }
                  </style>
                  ...
                  <ul>
                      <li>User</li>
                      <li>|</li>
                      <li>Files</li>
                      <li>|</li>
                  </ul>
                  Das geht natürlich nicht mehr gut wenn ich dynamisch die Ausgabe erstelle und der Trenner auch als erstes Listenelement vorkommen kann.
                  HTML-Code:
                  <ul>
                      <li>|</li>
                      <li>User</li>
                  ...
                  Hier ist das Trennzeichen das erste Element also geht die Variante nicht.

                  Lösung 2, die Variante mit Klassen, hier braucht es dann keine Pseudoelemente
                  HTML-Code:
                  <style>
                      .navitem { background: #ff00ff; }
                      .nav-trenner { background: #ffff00; }
                  </style>
                  ...
                  <ul>
                      <li class="navitem">User</li>
                      <li class="nav-trenner">|</li>
                      <li class="navitem">Files</li>
                      <li class="nav-trenner">|</li>
                  </ul>
                  Wenn hier der HTML Code dynamisch ausgegeben wird, dann weiss ich ja schon, was Trenner und was Item ist, wie sonst könnte ich denn sonst die Klassen hinzufügen.
                  Da dem so ist, kann ich auch einfach dem ersten Item-Element eine weitere Klasse hinzufügen, damit das erste Element optisch hervorgehoben wird.
                  HTML-Code:
                  <style>
                  .navitem { background: #ff00ff; }
                  .nav-trenner { background: #ffff00; }
                  .firstnavitem { background: #ff0000; }
                  </style>
                  ...
                  <ul>
                      <li class="nav-trenner">|</li>
                      <li class="navitem firstnavitem">User</li>
                      <li class="nav-trenner">|</li>
                      <li class="navitem">Files</li>
                      <li class="nav-trenner">|</li>
                  </ul>
                  die Klasse navitem kann hier natürlich entfallen und ist nur für Erklärungszwecke noch drin.

                  Eine Mischung von Klassen, Ids und Pseude-Klassen ist in sofern gefährlich, da man sich gut auskennen muss in Bezug auf die Spezifität um keine Überraschungen zu erleben.

                  Kurzum, entweder Pseudoklassen und Siblings(~) etc. verwenden oder Klassen.

                  Dennoch will ich hier die Lösung zu obigem Markup mal zeigen, auch wenn wie vorab erklärt das natürlich Unsinn ist.
                  HTML-Code:
                  <style>
                  ul > li.item { background: #ff0000; }
                  ul > li.item ~li.item { background: inherit; }
                  </style>
                  ..
                  <ul>
                      <li class="trenner">|</li>
                      <li></li>
                      <li class="item">User</li>
                      <li class="trenner">|</li>
                      <li class="item">Files</li>
                      <li class="trenner">|</li>
                  </ul>
                  Eine nette Testplattform ist übrigens https://htmlfiddle.net/

                  Kommentar


                  • #10
                    Hui hier ist ja viel passiert.
                    Danke an dieser Stelle auch an Protestix für die ausführliche Erklärung. Werde mich die Tage nochmal dran versuchen und schauen ob ich das hinbekomme.

                    Kommentar

                    Lädt...
                    X