- 締切済み
CSSセレクターについて
HTML内にh3が散らばってある場合に1番目に出てくるh3、２番めに出てくるh3と指定できるようなセレクターはありますか？ h3の親要素は別だったりと出現ポイントには法則がないものとします。
- muuming2001
- お礼率67% (716/1053)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
CSSで、それぞれ h3.farst{ } h3.second{ } h3.thrde{ } と、いうように記述されては、いかがでしょうか？・・・
- oshikota
- ベストアンサー率16% (11/67)
.sample:nth-child(n) .sample:nth-last-child(n) .sample:nth-of-type(n) .sample:nth-last-of-type(n) あたりが該当するかと思いますが、 親要素が別だと、その親要素を基準にして順番を数えてしまうため、 その親要素から何番目、というカウントがされてしまうと思います。 <div class="test"> <h3>テスト1</h3> <h3>テスト2</h3> <h3>テスト3</h3> <div class="text02"> <h3>テスト4</h3> <h3>テスト5</h3> </div> </div> div h3:nth-of-type(1) { color: #f00; } とした場合、「テスト１」と「テスト５」の色が変わります。 よって、CSSのほうは上記のものに加えて div div h3:nth-of-type(1){ color: #ff0; } このように階層指定してあげると、テスト１、テスト５と 違う色にできまず。 または隣接セレクタを駆使しながら 出現したときに適用されるという記述にするとか・・・ いずれにしても例えば親要素をbodyとかにして 一括指定が出来ないのでスマートではないですね。 結論を言うと、:nth-child(n)ひとつだけでは 色んなパターンに対応できなさそうです。 それかjQueryを使用し、要素の個数取得して それにClassを追加するとか、そんな方法になるのかな、 と思います。
お礼
ありがとうございます。やっぱり一気に指定はできないのですね。
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
css3でよければ h3:nth-of-type(1) とか？
お礼
親要素が違うと使えませんね。 例えば <body> <h1>aaaa</h1> <div><h1>bbb</h1></div> <div><div><h1>ccc</h1></div></div> </body> 上記のような場合のh1の最初、２番め、３番目とHTMLに出現する順に一発で指定できるようなセレクタが無いかと思った次第です。
お礼
それはクラスを指定してということですね。 それなら普通に出来ますが、クラスは指定したくないのです。