子要素で先頭の時だけスタイルを適用する

Question

具体的には、

<div class="hoge">
  <h1>タイトル1<h1> <!--ここだけ適用-->
  <p>テキストテキスト</p>
  <h1>タイトル2<h1>
  <p>テキストテキスト</p>
  <h1>タイトル3<h1>
  <p>テキストテキスト</p>
</div>

上記において、hogeクラスの子要素である
先頭の"タイトル1"というh1タグのみにスタイルを適用したいが、
"タイトル1"の前に別の要素がある場合はスタイルは適用したくない。

<div class="hoge">
  <p>テキストテキスト</p>
  <h1>タイトル1<h1> <!--子要素の先頭ではないので適用しない-->
  <p>テキストテキスト</p>
  <h1>タイトル2<h1>
  <p>テキストテキスト</p>
  <h1>タイトル3<h1>
  <p>テキストテキスト</p>
</div>

スマートな方法はありますでしょうか。

Comments

[mutsuki22]

必要に応じてクラス名を付ける以外で、何か特別な構文？（専門的な用語をど忘れしました、申し訳ありません）的なものがないかって事ですか？

[yuki84web]

仰る通り、HTMLにクラスを付ける以外の方法です

Answer 1

同セクショニング内では、h1は複数あるのは、セマンティクス正しくはないですが・・・。

nth-of-type():first-child疑似セレクタを使います。

.hoge h1:first-child {
  /* スタイル内容 */
}

他にもいろいろなセレクタで、可能なので、
調べてみるとよいでしょう。

Comments

[mutsuki22]

＞h1は複数あるのは、セマンティクス正しくはないですが・・・。

指摘されるまで違和感を抱かなかったという・・・orz

[miyabi_pudding]

HTML5の時点でも、HTML内に複数ありでも、あくまで同セクショングには一個だけでしたからねー　汗
そこらへんややこしかったから、HTML5.1以降のルールの方がわかりやすくていいですよね。

[yuki84web]

h1の扱いについての指摘ありがとうございます。サンプルソースは問題ありですが、実際作成中のページにおいては、h1はページ内に１つだけ存在するページタイトルに、それ以外のタイトルはh2以降を使用するようにしています。

[miyabi_pudding]

質問者さん>お、であれば、問題なさそうですね。
いちおう、サンプルコードの時も、本番想定や、自分の実コードの方が、勘違いを生まなくていいかもしれません。
ひとまず、質問解決もされたようで何よりです！

Answer 2

<style>
.hoge h1:nth-child(1){background-Color:red;}
.hoge h1{background-Color:yellow;}
.fuga h1:nth-child(1){background-Color:blue;}
.fuga h1{background-Color:yellow;}
</style>
<div class="hoge">
  <h1>タイトル1</h1>
  <p>テキストテキスト</p>
  <h1>タイトル2</h1>
  <p>テキストテキスト</p>
  <h1>タイトル3</h1>
  <p>テキストテキスト</p>
</div>
<hr>
<div class="fuga">
  <p>テキストテキスト</p>
  <h1>タイトル1</h1>
  <p>テキストテキスト</p>
  <h1>タイトル2</h1>
  <p>テキストテキスト</p>
  <h1>タイトル3</h1>
  <p>テキストテキスト</p>
</div>

Comments

[yambejp]

nth-childはsiblingの中での出現位置なので上記のようになります
逆に複数あるh2のうちのn番目とかはcssでは指定しづらいです