web-dev-qa-db-ja.com

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

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

<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内の1番目のdiv）のcssセレクターは何ですか？

csscss-selectors
85
GregH

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

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

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

別のオプション：

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

あなたが欲しい

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

H1が常にそこにあると仮定できる場合、

div h1+div {...}

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

#content h1+div {...}

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

16
Stan Rogers

あなたが探しているものに最も近いものは ：first-child pseudoclass ;です。残念ながら、<h1>の前に<div>sがあるため、これは機能しません。私が提案するのは、<div>のような<div class="first">にクラスを追加し、そのようにスタイルを設定するか、本当にクラスを追加できない場合はjQueryを使用することです。

$('#content > div:first')

6
Josh Leitzel