html - 特定の型の最初の子要素

Question

<h1>3 人の子供 (1と 2 <div>)を持つセクションがあります。

<section class="half">
  <h1>Half</h1>
  <div>
    left half
  </div>
  <div>
    right half
  </div>
</section>

次に、これらのブロックにいくつかのスタイルを追加しています

section > h1 { ... }
section > div { ... }

<div>セクションの最初の要素に追加のスタイルを指定したいと考えています。

セクションsection > :first-childの最初の子が<h1>.

では、どのように書けばよいのでしょうか。

Answer 1

それ:nth-of-typeが目的です：

section > div:nth-of-type(1) {
    /* CSS properties go here... */
}

Answer 2

あなたが探しています:first-of-type

Answer 3

only を使用すると、親要素が であるsection > div:nth-of-type(1) {最初の要素が選択されるため、緩いセレクターになると感じます。divsection

section.half > div:nth-of-type(1) { /* This will select 1st div element inside
                                     * section having class .half
                                     */
    /* Styles goes here */
}

デモ

デモも使えますfirst-of-type

section.half > div:first-of-type {
    /* Styles goes here */
}

Answer 4

動作中のjsFiddleデモ

間違いなく、ジョセフ・シルバーの答えは素晴らしいです。ただし、CSS3 を使用したくない場合は、次の方法があります。

section > div { background: red; }
section > div + div { background: transparent; }

まず、すべてのdiv 要素を選択し、プロパティを設定します。次に、2 番目以降の div を選択し、それらのプロパティをリセットします。