css:after niet bij eerste zichtbare

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

17/01/2019 08:29:10
Quote Anchor link
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.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
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
 
PHP hulp

PHP hulp

20/08/2019 21:38:55
 
Johan M

Johan M

17/01/2019 08:54:50
Quote Anchor link
Lukt het misschien met een JavaScript join() (JS-versie van PHP's implode) i.p.v. met CSS?
 
Ozzie PHP

Ozzie PHP

17/01/2019 11:16:36
Quote Anchor link
Kun je het misschien niet ombouwen naar 'after', zoiets als dit? (niet getest!)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
div.bye span:not(last-child)::after{
    content:", ";
}
 
Jan R

Jan R

17/01/2019 12:29:32
Quote Anchor link
Ozzie PHP op 17/01/2019 11:16:36:
Kun je het misschien niet ombouwen naar 'after', zoiets als dit? (niet getest!)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
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.
Gewijzigd op 17/01/2019 13:25:31 door Jan R
 
Ozzie PHP

Ozzie PHP

17/01/2019 12:33:22
Quote Anchor link
>> 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

Jan R

17/01/2019 13:24:15
Quote Anchor link
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
Moderator

Ward van der Put

17/01/2019 13:39:04
Quote Anchor link
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

Ozzie PHP

17/01/2019 17:05:50
Quote Anchor link
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

Jan R

18/01/2019 06:54:13
Quote Anchor link
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

Toevoeging op 18/01/2019 07:25:46:

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

Ozzie PHP

18/01/2019 12:17:16
Quote Anchor link
>> Staat in de start van het topic :) javascript

Plaats de regels code eens als je wil.
 
Thomas van den Heuvel

Thomas van den Heuvel

18/01/2019 13:15:26
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.