css selector

[Siggi]

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

[Gunnar Bittersmann]

@@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.

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

[Siggi]

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

[Gunnar Bittersmann]

@@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.

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

[MudGuard]

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

[Tabellenkalk]

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

[Gunnar Bittersmann]

@@Tabellenkalk

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

Dann ist :only-of-type.

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

[Tabellenkalk]

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

[Siggi]

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

Danke euch Siggi

[Gunnar Bittersmann]

@@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.

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

[Gunnar Bittersmann]

@@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.

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