ugrás a tartalomhoz

Attribútum szerinti csoportosítás

alkony4 · 2022. Szep. 7. (Sze), 18.16
Szervusztok!

Valaki tudna segíteni abban, hogyan lehet kiválasztani egymást követő elemek azonos attribútum értékével rendelkező elemeinek első egyedét?

<div value="1">1.</div>
<div value="2">2.</div>
<div value="2">3.</div>
<div value="3">4.</div>
<div value="1">5.</div>
<div value="1">6.</div>
<div value="4">7.</div>
<div value="4">8.</div>
<div value="5">9.</div>
<div value="1">10.</div>
Azt szeretném elérni, hogy az 1,2,4,5,7,9,10. sorok legyenek szelektálva.
Megtisztelő válaszaitok és segítségetek köszönöm.
‹ Javascript, ami a lap forrásában nem látszik, csak a development tools-ban (ds6.biz) Nosleep website ›
 ■
1

:first-of-type és

Poetro · 2022. Szep. 9. (P), 09.29
:first-of-type és [attr=value]
2

Én is ezzel próbálkoztam : )

alkony4 · 2022. Szep. 10. (Szo), 14.45
Én is ezzel próbálkoztam : ) de ha eltudod érni vele a kívánt eredményt akkor külön köszönet érte.
3

Ez így nehéz lesz

Pepita · 2022. Szep. 13. (K), 07.45
"azonos attribútum értékével rendelkező elemeinek első egyedét" - ez az 1, 2, 4, 7, 9 sorok (és erre jó Poetro megoldása), de az 5 és a 10 nem első.
Ha szeretnéd belevenni 5 és 10-et is, akkor szerintem neked kell logikát írnod rá.
- Kiválasztod az összes div-et (pl teszel rájuk class-t, ha szükséges)
- Az első elem mindenképp szerepel, felveszed
- Iterálsz a 2-tól végig, és ha az előző elem value <> this.value, felveszed
4

Köszönöm a választ. Igazából

alkony4 · 2022. Szep. 14. (Sze), 17.41
Köszönöm a választ. Igazából megoldást tudnék rá magam is írni külön, csak az lett volna a szép és jó ha valaki tudott volna rá pure css megoldást : D A gond az, hogy bizonyos módszer létezik a megvalósításra css-ben is mint pl a:
:not([value="1"]) + [value="1"]
viszont ez megköveteli, hogy a szülőnek legyen egy trash sora illetve hogy minden felmerülő értékkel előre tisztában legyünk (ez viszont így nem szép). Reméltem tud rá valaki valami szebb megoldást, de akkor lehet marad a favágás ._.'
5

attr + reset

Poetro · 2022. Szep. 19. (H), 20.39
div[value="1"] {
  color: red;
}
div[value="1"] + div[value="1"] {
  color: unset;
}
div[value="2"] {
  color: green;
}
div[value="2"] + div[value="2"] {
  color: unset;
}
div[value="3"] {
  color: blue;
}
div[value="3"] + div[value="3"] {
  color: unset;
}
div[value="4"] {
  color: purple;
}
div[value="4"] + div[value="4"] {
  color: unset;
}
div[value="5"] {
  color: brown;
}
div[value="5"] + div[value="5"] {
  color: unset;
}
6

Ez szép és jó, köszönöm, én

alkony4 · 2022. Szep. 21. (Sze), 15.25
Ez szép és jó, köszönöm, én is így valósítottam részben meg de a gond továbbra is az, hogy az értékek nem ismertek. De azért köszönöm.
7

HTML

Poetro · 2022. Szep. 22. (Cs), 20.16
De honnan jön a HTML, hogy az értékek nem ismerték? Mert egyszerűbb lenne, ha eleve minden első elem eleve kapna egy osztályt, és akkor a CSS is egyszerű maradhat.