*

div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

公開日: : ノウハウ

divタグ

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CSS も冗長になって美しくありません。nth-child が全てを解決してくれます。例として以下を御覧ください。

  • りんご
  • みかん
  • ぶどう

この2行目のみかんのみ文字色を変えたいという場合は css で nth-child を指定します。

ul li:nth-child(2){
   color:#f00;
}

nth-child(2) でリストの2番目を指定するという意味になります。

前置きはこのくらいにして、ここからが本題です。このような便利な nth-child ですが、div 要素に nth-child を指定した時に詰まりました。

クラス名の違うdivが連なる場合

このような html ソースがあるとしましょう。

<div class="top">
   トップ1
</div>
<div class="top">
   トップ2
</div>
<div class="bottom">
   ボトム1
</div>
<div class="bottom">
   ボトム2
</div>

ボトム1を指定したいので以下のような css にしました。

div.bottom:nth-child(1){
   color:#f00;
}

しかし、文字色は変わりませんでした。

div.top:nth-child(1){
   color:#f00;
}

上の方にあるクラス名 top を指定するとちゃんと文字色が変わります。ここで原因がわからず詰まっていたのです。

対処法

以下のようにすることでちゃんと目的の要素を指定できました。

<section>
   <div class="top">
      トップ1
   </div>
   <div class="top">
      トップ2
   </div>
</section>
<section>
   <div class="bottom">
      ボトム1
   </div>
   <div class="bottom">
      ボトム2
   </div>
</section>

CSS は次のように。

section div.bottom:nth-child(1){
   color:#f00;	
}

div 要素をもう一つ大きな要素に内包させる事で nth-child で目的の要素を指定できました。

ここで前の記述を思い出してみると…。

<div class="top">
   トップ1
</div>
<div class="top">
   トップ2
</div>
<div class="bottom">
   ボトム1
</div>
<div class="bottom">
   ボトム2
</div>
div.bottom:nth-child(1){
   color:#f00;
}

これではどれも文字に色が付く事はありませんでした。調べてみると nth-child は class は関係なく div の要素を数えるようです。ようするに、bottom クラスが付いた div 要素の1番目という物は存在しないという事になります。何故なら div 要素の1番目は「トップ1」が書かれた部分だからです。

「div.top:nth-child(1)」で「トップ1」の色が変わった理由は、「.top」を無くしても結局 div の1番目の要素が指定される為です。

外側に section 要素で囲った事で「div.bottom:nth-child(1)」は section 要素の div 要素の1番目という指定になるため色が変わるのです。ただ、「.bottom」のクラス名を無くすと「トップ1」と「ボトム1」の色が変わってしまうのでクラス名も一応意味はあるようです。

  • Pocket

おすすめトピックス

関連記事

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々登場するもので、小説、雑誌、文書など様々な場面に登場するものです。三点リーダーとはすなわち「…」、点が3つ並んだものです。普段のメールなどの会話でも言葉を省略 […]

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る