CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Santhosh
Santhosh

Reputation: 11774

css slector jquery: how to select first occurance of class after a particular class

I have the following html

<ul class="main"> ... </ul>
<div class="submain">...</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

...

<ul class="main"> ... </ul>
<div class="submain">...</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

How to select all the first submain elements after main.

Upvotes: 0

Views: 45

Answers (2)

Rafał
Rafał

Reputation: 118

As Code Maniac said - use "+" combinator to select adjacent siblings. From me, I'll give you link to the docs of how CSS combinators works: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators

Upvotes: 0

Code Maniac
Code Maniac

Reputation: 37755

You can do it like this

For this case you need to select the sibling of the class so that can be achieved with + selector.

The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element. You can read up more here Adjacent sibling combinator

.main + .submain{
  color:green;
  background:'blue';
}
<ul class="main"> ... </ul>
<div class="submain">Selected</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

...

<ul class="main"> ... </ul>
<div class="submain">Selected</div>  --> select this
<div class="submain">...</div>
<div class="submain">...</div>

Upvotes: 2

Related Questions