Can CSS have an arbitrary number of elements inside a pseudo-selector?

Question

DOM snippet

ul.this>li>ul                                  ->match
ul.this>li>div>ul                              ->match
ul.this>li>div>div>ul                          ->match
ul.this>li>div>menu>div>nav>div>div>div>div>ul ->match
ul.this>li>ul>li>div>ul                        ->dont match
ul.this>li>div>ul>li>div>ul                    ->dont match

Is there a better way in CSS than stating:

ul.this>li>ul, ul.this>li>:not(ul)>ul, ul.this>li>:not(ul)>:not(ul)>ul,
ul.this>li>:not(ul)>:not(ul)>:not(ul)>ul,
ul.this>li>:not(ul)>:not(ul)>:not(ul)>:not(ul)>ul,
ul.this>li>:not(ul)>:not(ul)>:not(ul)>:not(ul)>:not(ul)>ul

…as that will still fail the n+1 case, but you have to end somewhere. Something like /(ul)+/ in regex?

Read:

Any ul inside and descending ul.this that has in its path from ul.this to the resulting ul no other ul in between.

What use-case are you trying to solve by asking the question? There's probably a way to do what you want, but without seeing an example of what you're trying to do it's hard (for me at least) to offer an answer. Can you post a snippet of your "minimal reproducible example" HTML and explain what should and shouldn't be selected? — David Thomas
– David Thomas, Commented Aug 26, 2024 at 9:45
Trying to get my brain round this: you want the first ul descendant of a given li? Is that correct? — A Haworth
– A Haworth, Commented Aug 26, 2024 at 11:08
"Any ul inside and descending this li that has in its path from li to the resulting ul no other ul in between.". What do you mean by "this li"? Your example li>ul,li>:not(ul.... matches ul descendants of any li. That matters because in valid HTML, all children of ul elements that can themselves contain a ul element must be an li element. So a ul element that's a descendant of a ul element that's a descendant of a given li - something that you don't want to match - will, by necessity be the descendant of a different li that doesn't have an intervening ul element. — Alohci
– Alohci, Commented Aug 26, 2024 at 12:16
On the other hand, if you mean a specific li, say one with an id of "myli", then your requirement is met simply by #myli ul:not(#myli ul ul) — Alohci
– Alohci, Commented Aug 26, 2024 at 12:35
It would help a lot if you presented some HTML/structure and told us what you wish and don’t wish to match within it. — deceze
– deceze ♦, Commented Aug 26, 2024 at 16:06

haolt · Accepted Answer · 2024-08-26 17:49:18Z

1

ul.this ul:not(ul.this ul ul) {/*...*/}

answered Aug 26, 2024 at 17:49

haolt

9674 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can CSS have an arbitrary number of elements inside a pseudo-selector?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related