css:after niet bij eerste zichtbare

Door Jan R op 17-01-2019 08:29

2.444 views

hi,

Ik heb een lijstje dat gesplitst moet worden met komma's. ik doe dit doen met pure CSS. Met deze code kom ik al ver.


div.bye span:not([style*="display: none"]):not(first-child)::before{
    content:", ";
}

Het probleem is dat er voor het eerste zichtbare GEEN komma mag staan. Ik kan het niet doen in php omdat de lijst met javascript wijzigt.

vb n1, n2, n3, n4, n5, n6, n7, n8
als alles getoond wordt heb ik geen fouten. als echter n1 display:none heeft dan staat er nog steeds een komma voor n2.

Alle mogelijke opties zijn mogelijk. Met 8 namen is dit dus 256, met 10 1024.

Jan

Johan M

17-01-2019 08:54

Lukt het misschien met een JavaScript join() (JS-versie van PHP's implode) i.p.v. met CSS?

Ozzie PHP

17-01-2019 11:16

Kun je het misschien niet ombouwen naar 'after', zoiets als dit? (niet getest!)



div.bye span:not(last-child)::after{
    content:", ";
}

Jan R

17-01-2019 12:29 gewijzigd op 17-01-2019 13:25

Ozzie PHP op 17/01/2019 11:16:36

Kun je het misschien niet ombouwen naar 'after', zoiets als dit? (niet getest!)
div.bye span:not(last-child)::after{
    content:", ";
} 

Lukt ook niet want dan krijg ik bij de laatste zichtbare span ook een komma indien er toch nog een onzichtbare span volgt.

Ozzie PHP

17-01-2019 12:33

>> Lukt ook niet want dan krijg ik bij de laatste zichtbare met toch nog een onzichtbare span achter ook een komma

Leg eens uit wat je bedoelt, want die zin loopt niet echt lekker ;)

Jan R

17-01-2019 13:24

n1, n2
waarbij n2 display:hidden bevat. n1 krijgt een komma after en toch is er geen vervolg meer in de lijst

Ward van der Put

17-01-2019 13:39

CSS-oplossingen voor een lijstje met komma's na elk lijstelement behalve het laatste:

https://stackoverflow.com/questions/2351623/combining-css-pseudo-elements-after-the-last-child

Ozzie PHP

17-01-2019 17:05

Jan R op 17/01/2019 13:24:15

n1, n2
waarbij n2 display:hidden bevat. ...

Je bedoelt display: none?

Hoe zet je dat betreffende element op display: none?

Jan R

18-01-2019 06:54

Ozzie PHP op 17/01/2019 17:05:50

Hoe zet je dat betreffende element op display: none?

Staat in de start van het topic :) javascript

[size=xsmall]Toevoeging op 18/01/2019 07:25:46:[/size]

Ward van der Put op 17/01/2019 13:39:04

CSS-oplossingen voor een lijstje met komma's na elk lijstelement behalve het laatste:

https://stackoverflow.com/questions/2351623/combining-css-pseudo-elements-after-the-last-child

Lukt ook niet. hier heb ik een komma voor het 2°li, ook indien li nr1 verborgen is.
Anders ongeveer dezelfde oplossing als ik al had. wel mooi voor de "and" tussen de 2 laatsten :)

Jan

Ozzie PHP

18-01-2019 12:17

>> Staat in de start van het topic :) javascript

Plaats de regels code eens als je wil.

Thomas van den Heuvel

18-01-2019 13:15

Als je dan toch JavaScript gebruikt om lijstjes te manipuleren, waarom zet je dan niet enkel zichtbare elementen in dat lijstje? Het klinkt alsof je het jezelf nogal ingewikkeld maakt.

Reageren

Inloggen om te reageren