CSS Выбор элемента после выбранного класса

Question

Я изменяю JQuery UI Accordion Menu, которое в настоящее время имеет следующую структуру:

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

Как видите, у среднего заголовка нет дочерних элементов, поэтому я хочу сделать в CSS:что-то вроде выделения div, которое происходит после класса .no-children, и скрытие этого.Они не являются вложенными, поэтому я не могу сделать это простым способом.

Я знаю, что могу display:none, но я не могу выбрать правильный элемент.

Есть ли способсделать это?

Answer 1

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

Выбирает DIV, которому непосредственно предшествует элемент с классом .nochildren.Это будет работать только в том случае, если оба элемента находятся на одном уровне, многие старые браузеры будут иметь проблемы с ним.

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

Answer 2

Вы можете использовать

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

или .nextUntil();

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

---

CSS будет выглядеть так:

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

http://jsfiddle.net/lollero/DqpPd/ (т.е. 7 +)

Answer 3

Если вы используете jQuery, есть простой способ сделать это Здесь