CSSのスタイル指定方法（直下セレクタ） | アザラシさんのプログラミング日記

はい、こんばんは。

本日はCSSの学びをアウトプットします。

入れ子構造の一番上にだけスタイルをあてたい・・・

ということで実際に例を出して見て行きます。

悪い例

HTML
<div class="selector">
  <div>
   ☆selectorの直下。ここにのみ適用させたい。
    <div>
     ここには適用させたくない。
    </div>
  </div>
</div>

CSS
.selector div{
/*適用させたいスタイル*/
}

上記のような書き方だと、適用させたくない部分のdivにもスタイルがかかってしまいます。

Webサイトの改善作業に取り組んでいるのですが、ループ処理の中の子要素にだけCSSを当てたい！！でも親のセレクタにスタイルを当ててしまっているので、子の子要素にまでCSSが聞いてしまっている・・・そんな時どうすれば良いの？？って時に使うのが直下セレクタというものです。

直下セレクタとは、要素直下にある要素にのみスタイルを適用させたいときに使うものです。

では、例を見て行きましょう！！

HTML
<div class="selector">
  <div>
   ☆selectorの直下。ここにのみ適用させたい。
    <div>
     ここには適用させたくない。
    </div>
  </div>
</div

CSS
.selector > div{
 background-color: red;
}

上記のように、>を用いることで、入れ子構造になっているが、ここにだけCSSをあてたい！！って時の問題を解決することができます。ちなみに下記のように記述することも可能です。

HTML
<div class="selector">
  <div>
   <p>ここにのみ適用させたい！！</p>
    <div>
     <h1>ここは適用させたくない！！</h1>
    </div>
  </div>
</div>

CSS
.selector > div > p{
 /*適用させたいスタイル*/
}

上記のように記述することで、p要素とh1要素を判別することができます。

時々見かけていた書き方ではあったのですが、今更勉強させていただきました。その他、隣接セレクタなど、様々なものがありますので、機会があればアウトプットさせていただきたいと思います！！

それでは！！