Siggi: css selector

Hallo,

ich habe Probleme das letzte img auszuschließen. Innerhalb eines p sind mehrere img mit einem margin-right. Das letzte img soll das nicht haben. Versucht habe ich:
img:not(:last-of-type) {margin-right:1rem; }

Wie selectiere ich das richtig?

Gruß Siggi

  1. @@Siggi

    ich habe Probleme das letzte img auszuschließen. Innerhalb eines p sind mehrere img mit einem margin-right. Das letzte img soll das nicht haben. Versucht habe ich:
    img:not(:last-of-type) {margin-right:1rem; }

    Wie selectiere ich das richtig?

    Genau so. Der Fehler liegt wohl in dem Teil, den du nicht gezeigt hast.

    🖖 Живіть довго і процвітайте

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. Genau so. Der Fehler liegt wohl in dem Teil, den du nicht gezeigt hast.

      Hallo Gunnar,

      html:

      <footer>
      <h2>schnipp</h2>
        <section>
         <p>
          <a href="schnipp"><img src="schnipp" alt="" height="32px"></a>
          <a href="schnipp"><img src="schnipp" alt="" height="32px"></a>
          <img src="schnipp" alt="" height="32px">
          <img src="schnipp" alt="" height="32px">
         </p>
         <p>
      	schnipp
         </p>
        </section>
       </footer>
      

      Da sollte der selector doch die ersten drei img matchen und das letzte img nicht, oder? Der margin wurde nur beim dritten img gesetzt.

      Ich schau mir dennoch die grid Variante an...

      Gruß Siggi

      1. @@Siggi

        <footer>
        <h2>schnipp</h2>
          <section>
           <p>
            <a href="schnipp"><img src="schnipp" alt="" height="32px"></a>
            <a href="schnipp"><img src="schnipp" alt="" height="32px"></a>
            <img src="schnipp" alt="" height="32px">
            <img src="schnipp" alt="" height="32px">
           </p>
           <p>
        	schnipp
           </p>
          </section>
         </footer>
        

        Da sollte der selector doch die ersten drei img matchen und das letzte img nicht, oder? Der margin wurde nur beim dritten img gesetzt.

        Das erste Bild ist das letzte Bild in seinem Elternelement a; der Selektor img:not(:last-of-type) greift also nicht. Ebenso das zweite Bild.

        Das dritte Bild ist nicht das letzte Bild in seinem Elternelement p; der Selektor img:not(:last-of-type) greift wie gewünscht.

        Das vierte Bild ist das letzte Bild in seinem Elternelement p; der Selektor img:not(:last-of-type) greift nicht – soll ja auch nicht.

        🖖 Живіть довго і процвітайте

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix
      2. Hi,

        html:

           <p>
            <a href="schnipp"><img src="schnipp" alt="" height="32px"></a>
            <a href="schnipp"><img src="schnipp" alt="" height="32px"></a>
            <img src="schnipp" alt="" height="32px">
            <img src="schnipp" alt="" height="32px">
           </p>
        

        Da sollte der selector doch die ersten drei img matchen und das letzte img nicht, oder? Der margin wurde nur beim dritten img gesetzt.

        Die ersten beiden img sind jeweils der last-of-type innerhalb des a-Elements.

        Das dritte img ist das einzige, das nicht der last-of-type innerhalb seines Eltern-Elements ist.

        cu,
        Andreas a/k/a MudGuard

        1. Hallo,

          Das dritte img ist das einzige, das nicht der last-of-type innerhalb seines Eltern-Elements ist.

          Merke: Oft ist last-of-type == first-of-type!

          Gruß
          Kalk

          1. @@Tabellenkalk

            Merke: Oft ist last-of-type == first-of-type!

            Dann ist :only-of-type.

            🖖 Живіть довго і процвітайте

            --
            When the power of love overcomes the love of power the world will know peace.
            — Jimi Hendrix
            1. Hallo,

              Merke: Oft ist last-of-type == first-of-type!

              Dann ist :only-of-type.

              Ah! Also wenn :only-of-type dann werden die Letzten die Ersten sein!

              Gruß
              Kalk

          2. Aha, jetzt dämmerts, dann doch wohl mal mit grid weitermachen...

            Danke euch Siggi

            1. @@Siggi

              Aha, jetzt dämmerts, dann doch wohl mal mit grid weitermachen...

              Was auch ginge: p > :not(:last-child) – aber mit was Spezifischerem als p.

              ☞ To every thing there is a season

              Aber mit Grid bist du sicher besser dran.

              🖖 Живіть довго і процвітайте

              --
              When the power of love overcomes the love of power the world will know peace.
              — Jimi Hendrix
  2. @@Siggi

    Innerhalb eines p sind mehrere img mit einem margin-right.

    Warum? Für Zwischenräume gibt’s die entsprechende Eigenschaft: gap. Der Container p muss dafür Flexbox oder Grid sein.

    🖖 Живіть довго і процвітайте

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix