Следующий элемент CSS

если у меня есть тег заголовка <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

и после этого у меня есть параграф <p>stuff here</p>

как я могу сказать, используя CSS, что каждый тег <p>, который следует за h1.hc-reform для использования: clear:both;

:

h1.hc-reform > p{
     clear:both;
}

почему-то не работает.

ОТВЕТЫ

Ответ 1

Это называется селектор соседнего сиблинга, и он представлен знаком плюса...

h1.hc-reform + p {
  clear:both;
}

Примечание: это не поддерживается в IE6 или старше.

Ответ 2

Вы можете использовать селектор ~:

h1.hc-reform ~ p{
     clear:both;
}

Это выбирает все p элементы, которые появляются после .hc-reform, а не только первый.

Ответ 3

no > - это дочерний селектор.

тот, который вы хотите, +

попробуйте h1.hc-reform + p

поддержка браузера невелика

Ответ 4

> - это дочерний селектор. Поэтому, если ваш HTML выглядит так:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... тогда ваш билет.

Но если ваш HTML выглядит так:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Затем вы хотите смежный селектор:

h1.hc-reform + p{
     clear:both;
}

Ответ 5

Не совсем. h1.hc-reform > p означает "any p ровно один уровень под h1.hc-reform".

Вы хотите h1.hc-reform + p. Конечно, это может вызвать некоторые проблемы в более старых версиях Internet Explorer; если вы хотите, чтобы страница совместима со старыми IE, вы застряли либо с добавлением класса вручную в абзацы, либо с использованием какого-либо JavaScript (в jQuery, например, вы могли бы сделать что-то вроде $('h1.hc-reform').next('p').addClass('first-paragraph')).

Дополнительная информация: http://www.w3.org/TR/CSS2/selector.html или http://css-tricks.com/child-and-sibling-selectors/