How to select first occurrence of some class

Question

Supoose you have something like

<div class="base"> <div> ... <div class="ok"> <div> ... <div class="ok"></div> ... </div> </div> ... </div> </div>

Here I've shown just a couple of DIVs, but it can be any level deep (note the ...)

So the question is: How can I style the first element with the class okwithout knowing how deep it is nested ?

Here is a DEMO in which you can see I style all the DIVs with the class ok

are your divs all nested, or there are some siblings?

Pepo_rasta
– Pepo_rasta

2016-07-12 14:55:19 +00:00
Commented Jul 12, 2016 at 14:55 — Pepo_rasta
– Pepo_rasta, Commented Jul 12, 2016 at 14:55

Pepo_rasta · Accepted Answer · 2016-07-12 14:56:43Z

3

there is no selector for that, but there is override workaround: you can apply some css to all .ok and then reset on all nested .ok

div { margin: 5px; padding: 5px; border: 1px solid green; background-color: #fff; } .ok { background-color: gray; } .ok .ok{ background-color: #fff; }

<div> ... <div class="ok"> ... <div class="ok"> ... <div class="ok"> ... <div> ... </div> </div> </div> </div> </div>

edited Jul 12, 2016 at 14:56

answered Jul 12, 2016 at 14:51

Pepo_rasta

2,91015 silver badges21 bronze badges

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

3 Comments

Quentin Over a year ago

This assumes that, with the exception of "the first one", all elements that are members of that class will be descendants of "the first one". That is true of the example in the question, but it isn't clear if that is the case universally.

Pepo_rasta Over a year ago

true, we shall ask

Jeanluca Scaljeri Over a year ago

In my specific case I need to style the first ok not the ones nested deeper, meaning that this works for me :)

Quentin · Accepted Answer · 2016-07-12 14:46:57Z

CSS provides no functionality to select an element based on anything that appears in the document after its start tag. Not descendants, not later siblings, and not later siblings of its ancestors.

You'd need to use JavaScript for this. Something along the lines of:

document.addEventListener("DOMContentLoaded", function(event) { document.querySelector(".ok").classList.add("ok-first"); });

Collectives™ on Stack Overflow

How to select first occurrence of some class

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related