css - CSS セレクター: 親の最初の子

Question

特定の型に一致する親の最初の要素を選択したい。に相当する CSS $(parent).children()[0]。たとえばh1、親の最初の子であるタグ:

<div>
  <h1 id="foo"></h1>     // match
  <div></div>            // not match
  …
</div>
<section>
  <h1 id="bar"></h1>    // match
  <div></div>           // not match
  …
</section>
<div>
  <div id="baz"></div> // not match
  <h1 id="qux"></h1>   // not match
  …
</div>

jsfiddle

編集「親」セレクターがないことは承知しています。

Answer 1

を使用して（準拠ブラウザで）親要素の最初 のものと一致させたい場合は、次のようにすることをお勧めします。h1:first-of-type

h1:first-of-type {
    /* CSS to style the first h1 of its parent element */
}

ただし、h1要素が親の最初の子である場合にのみスタイルを設定する場合は、次のようにします。

h1:first-child {
    /* CSS to style the h1 only if it's the first-child of its parent element */
}