別のdiv内の最初のdivを選択するために使用できるCSSセレクター

95

私のようなものがあります：

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

そのdiv内の日付のフォント色を設定できるように、2番目のdiv（「content」div内の最初のdiv）のcssセレクターは何ですか？

css css-selectors

— グレッグ
ソース

1

上位投票の回答を受け入れてください。間違いなく正しいです。

— バリーマイケルドイル

223

あなたの質問に対する最も正しい答えは...

#content > div:first-of-type { /* css */ }

これにより、CSSが#contentの直接の子である最初のdivに適用されます（#contentの最初の子要素である場合とそうでない場合があります）。

別のオプション：

#content > div:nth-of-type(1) { /* css */ }

— ジェレミー・モリッツ
ソース

6

それが質問に対する唯一の正解であり、受け入れられるべきであることに同意します。

— Ilya Streltsyn 2013

except最初/最後のすべてのdivを選択する方法を教えていただけますか？

— TAN

4

@HappyCoding#content > div:not(:last-of-type) { /* css */ }

— Jeremy Moritz、

@Tân最初と最後以外のすべてのdivが必要な場合、それは... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— Jeremy Moritz

20

あなたが欲しい

#content div:first-child {
/*css*/
}

— キャプテンオーティス
ソース

3

<div>は最初の子ではないため、機能しません（それはです<h1>）。

— Josh Leitzel、2010

日付divが最初の子であっても、IEではまったく機能しません。

— Valentin Flachsel、2010

1

本当に？W3は、doctypeが指定されている限り、そうなると言っています。（正直なところ、私にはわかりません。）

— Josh Leitzel

3

テストを実行しただけで、実際にdoctypeが指定されている場合は機能します。私の弁護では、ファイルの先頭に<the_cake_is_a_lie>と入力した場合、IEで何かが機能し始めても驚かないでしょう...

— Valentin Flachsel '19

1

私は常に答えを投稿する前にテストします。そして、ケーキは嘘です。

— Otis大尉

16

H1が常に存在すると想定できる場合、

div h1+div {...}

ただし、コンテンツdivのIDを指定することをためらわないでください。

#content h1+div {...}

これは、jQueryのようなJavaScriptライブラリーに頼ることなく、今すぐクロスブラウザーを取得できるのと同じくらい良いことです。h1 + divを使用すると、H1の後の最初のdivのみがスタイルを取得するようになります。代替手段はありますが、CSS3セレクターに依存しているため、ほとんどのIEインストールでは機能しません。

— スタン・ロジャース
ソース

+1。それについてさえ考えなかった。このソリューションはIE6では機能しないことに注意してください。

— Josh Leitzel、2009

6

あなたが探しているものに最も近いものは：first-child疑似クラスです。あなたが持っているので、残念ながらこれはあなたのケースでは動作しません<h1>前に<div>s。私は何を示唆していると、あなたはどちらかにクラスを追加することである<div>ように、<div class="first">あなたが本当にクラスを追加することができない場合や、スタイル、それその方法、またはjQueryのを使用します。

$('#content > div:first')

— ジョシュ・ライツェル
ソース

1

ミススペル-する必要があります$('#content > div.first)

— Mateusz Odelga 2015年