次の要素のCSSのセレクターの構文は何ですか？

200

ヘッダータグがある場合 <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;
}

何らかの理由で機能しません。

— トニー・ノリエガ
ソース

397

これは隣接兄弟セレクターと呼ばれ、プラス記号で表されます...

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

注：これはIE6以前ではサポートされていません。

— ジョシュ・ストドラ
ソース

4

それpは直後に来るものだけを選択するでしょうh1.hc-reform。それでもclear: both、h1フロートをクリアするだけなので、それが機能するために適用する必要があるのはそれだけなので、それでも有効な答えです。

— BoltClock

@BoltClockはい、あなたは正しいです。仕様を誤って読み、間違っていたためそのコメントを削除しました。このセレクターpは、直前のh1.hc-reform（もちろん、同じ親要素を持つ）とのみ一致します。

— Josh Stodola

4

うわー、隣接する兄弟セレクターを知りませんでした。よかった、ありがとう！

— 理論化

1

この場合、〜はより良いセレクタです。ここで動作しているJSfiddle jsfiddle.net/dZAtt

— ProblemsOfSumit

最初の要素に子がある場合、これは機能しないことに注意してください

— 72GM

60

兄弟セレクターを使用できます~。

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

これにより、最初のp要素.hc-reformだけでなく、に続くすべての要素が選択されます。

— ステファン・ミュラー
ソース

最初のリンクのIEバグはあいまいなエッジケースのものであり、これがおそらくquirksmodeがそれらを見落としている理由です。

— 斧。

14

>子セレクタではありません。

あなたが欲しいのは +

だから試して h1.hc-reform + p

ブラウザのサポートが良くない

— モインザマン
ソース

2020年：10年後のブラウザーサポートは素晴らしい。CSS初心者のための単なる情報。

— AlexioVay

8

>ある子セレクタ。したがって、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;
}

— リチャードJPルグエン
ソース

4

私は彼がh1の中にpを入れ子にしていないことを望みます。また、隣接は最初のpのみを選択します。

— Stephan Muller

2

ではない正確に。h1.hc-reform > p手段「いずれかの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/

— ジャスティン・ラッセル
ソース