CODEWITHSUNDEEP
csscss-selectors
Dan Hanly
Dan Hanly

Reputation: 7839

CSS Selecting element after chosen class

I'm modifying JQuery UI Accordion Menu, which currently has a structure as below:

<h3>Title</h3>
<div>Children</div>
<h3 class="no-children">Title</h3>
<div>Children</div>
<h3>Title</h3>
<div>Children</div> ...

As you can see, the middle title has no children, so what I want to do in CSS is something along the lines of selecting the div that occurs after the .no-children class and hide it. These are not nested so I can't do this the easy way.

I know I can display:none but I can't seem to select the correct element.

Is there a way to do this?

Upvotes: 2

Views: 311

Answers (3)

Ben
Ben

Reputation: 13645

.nochildren+div{
  /* Style goes here */
}

This selects a DIV that that is immediately preceded by a element with the the .nochildren class. This will only work if both elements are on the same level, many older browsers will have issues with it.

http://www.quirksmode.org/css/contents.html

Upvotes: 4

Joonas
Joonas

Reputation: 7305

You could use 

$('.no-children').next().hide();

or .nextUntil();

http://jsfiddle.net/lollero/DqpPd/1/

CSS way would be 

.no-children + div { display: none; }

http://jsfiddle.net/lollero/DqpPd/ ( ie7+ )

Upvotes: 1

user1080894
user1080894

Reputation:

If you are using jQuery there is an easy way of doing this Here

Upvotes: 1

Related Questions