コーディング

【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。<前編>

投稿日:2020年8月18日 更新日:

こんにちは。

今回はセレクタについてまとめていきたいと思います。

自分自身よく混乱してしまうので、備忘録として残していつでも戻ってこれる様にしようと思います。

CSSでセレクタってマストで必要な知識ですが、知っておくと便利なセレクタ達があります。※今回は超基本的なセレクタ(要素、クラス、id指定)の記述方法は飛ばします。

それらを使うことで下記のメリットがあります。

・CSSを短縮してい書ける様になりコーディングスピードが上がる。
・不要なクラス指定が無くなり読みやすいコードになる。
・変更や修正が発生した時の更新性が上がる。


今回の記事の内容を実務に落とし込むことができれば、作業スピードも上がり、公開後の更新作業も楽になります。

是非理解してください!

そして今回解説するセレクタは以下です。

・複数指定「,」
・子孫指定「半角スペース」
・子要素指定「>」
・隣接要素指定「+」
・以降の同階層指定「~」
・全要素指定「*」


個人的はよく忘れるセレクタ達です。
セレクタは他にも色々ありますので、一つの記事にまとめると長ったらしくなると思ったので「前編」と「後編」に分けたいと思います。

後編にはセミコロン(:)を使うセレクタを紹介します。
ex) :first-child,,,,,etc
ちなみ下記が後編です。

<後編>first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。6コだけ

では、前編を開始します。

複数の要素を指定する「 A, B」

カンマで区切ると複数の要素を指定することが可能です。
まずは下記をみてください。

<style>
 h1,h2{
    color: red;
  }
</style>
<body>
  <div class="container">
    <h1>H1は指定されました</h1>
     <h2>H2は指定されました</h2>
     <p>pは指定されてません</p>
  </div>
</body>

結果は上記の様になります。

ここでこう感じる方もいるのではないでしょうか?
覚えること多いし、知ってる知識の使い回しでできるんならOKじゃない?(自分自身そうでした。)

そして疑問が湧いてきます。
疑問1)同じクラスを指定すればいいんじゃない?
疑問2)それぞれに新たに共通のクラス名を追加すればいいんじゃない?

これらの疑問はこれから説明するセレクタ全部に言えることなので、ここで先に説明しておきます。

疑問1)同じクラスを指定すればいいんじゃない?

今回は文字色だけの変更でしたが、
例えば,
h1とh2で色、太さが同じでフォントサイズだけ違う設定をしたいと言う状況だと同じクラス名にするわけにはいきません。

あるCSSを共通で設定したい場合はやはり適切なセレクタ指定が必要です。
下記が例となります。

<style>
 .headline01, .headline02{
  color: red;
  font-weight: bold;
 }
 .headline01{
  font-size: 20px;
 }
 .headline02{
  font-size: 18px
 }
 p{
  font-size: 15px
 }
</style>
<body>
 <div class="container">
  <h1 class="headline01">H1は指定されました</h1>
  <h2 class="headline02">H2は指定されました</h2>
  <p>Pは指定されてません</p>
 </div>
</body>


疑問2)それぞれに新たに共通のクラス名を追加すればいいんじゃない?

確かにそれなら対応できるでしょう。
しかし今度はHTMLの可読性が悪くなります。
今回は2つの要素での例でしたが、10個の要素ではどうでしょう?

HTML中に同じクラス名が散乱しHTMLが見辛くなりませんか?

コードを更新するのはあなただけではなく他のメンバーも行います。
その際誰が見ても読みやすいコードにしておく必要があります。


なので細かなセレクターを覚える必要があるのです!

子孫指定「A B」

<style>
 .container span{
	color: red;
 }
</style>
<body>
 <div class = "container">
   <p>私は<span>指定されました</span></p>
   <p>指定されてません</p>
   <p>指定されてません</p>
  </div>
</body>

子孫要素の指定は、指定する要素と要素の間に半角スペースを入れます。
一番目に記載している要素は親要素を書きます。
今回の例では「.container」の後ろに半角スペースを入れ、子要素「p」を2番目に指定しています。

この様に記述することで適応させる要素を限定させているのです。

注意としてはこれは孫要素にも影響すると言うことです。
どう言うことかと言うと。。。

<style>
 .container p{
  color: red;
 }
</style>
<body>
 <div class="container">
   <p>子が指定されました</p>
   <p>子が指定されました</p>
    <div class=“sub-container”>
      <p>孫も指定されました</p>
   </div>
  </div>
</body>

この様に子要素だけではなく、孫要素までCSSが適応されてしました。
気をつけましょう。

子要素指定「A > B」

「>」をつけることで1階層下の子要素のみにCSSが適用されます。

<style>
 .container > p{
  color: red;
 }
</style>
<body>
  <div class = "container">
    <div class=“sub-container”>
      <p>孫は指定されてません</p>
    </div>
    <p>子が指定されました</p>
    <p>子が指定されました</p>
  </div>
</body>

この場合「.sub-container」の中にある孫要素<p>にはCSSが適用されません。
ここが一つ上の「半角スペース」との違いです。

同階層すぐ後の要素のみを指定「+」

<style>
.test + li{
 color: red;
}
</style>
<body>
 <div class="container">
  <ul>
   <li>指定されてません</li>
   <li>指定されてません</li>
   <li class="test">指定されてません</li>
   <li>testクラス直下だけが指定されました</li>
   <li>指定されてません</li>
  </ul>
 </div>
</body>

「+」をつけて指定することで、「.testの後に来る最初の<li>の要素にCSSを適用する」と言う意味になります。

ある要素以降の同階層を指定「A ~ B」

<style>
 .test ~ p{
  color: red;
 }
</style>
<body>
 <div class="container">
  <p>1.このpは指定されてません</p>
   <div class="test">
      <p>2.このpは指定されてません</p>
      <p>3.このpは指定されてません</p>
   </div>
   <p>4.このpは指定されました</p>
   <p>5.このpは指定されました</p>
 </div>
</body>

「~」はある要素以降かつ同階層の要素を指定することができます。上記の例では、「.test以降で同階層の<p>を全てにCSSを当てる」と言うことになります。ですので、.test以前の<p>や同階層ではない.testの子要素にあたる<p>達はにはCSSが当たっていません。

全要素の指定「*」

<style>
 .test *{
  color: red;
 }
</style>
<body>
 <div class="container">
  <p>このpは指定されてません</p>
  <div class="test">
   <h1>H1が指定されました</h1>
   <h2>H2が指定されました</h2>
   <p>このpは指定されました</p>
  </div>
 </div>
</body>

「*」は全要素を指定するセレクタです。
上記の例では「.testの中の全要素にCSSを適応する」と言う指示になります。
<h1>,<h2>,<p>要素どれもCSSが適応されていますね。

いかがでしたでしょうか?
まずは基本のセレクタをまとめました。

繰り返しになりますがこれらのセレクタを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。

是非積極的に使っていきましょう!

後編はこちらから↓

<後編>first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。6コだけ

-コーディング
-, , , , ,

執筆者:

関連記事

勉強

プログラミング初心者の独学の方法、おすすめ教材

完全初心者からWebチーム内で戦えるようになった方法について書きます。

RubyとRailsとRuby on Railsの関係は?

Rubyなの?Railsなの?Ruby on Railsなの? それぞれバラバラなの?の様にまだ整理ができてない方は是非読んで見てください。

CSS

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

CSS小技集。勉強しててイイなと思ったテクを共有します。

プログラミングを独学で始めて3年間の成長ログ【現役フロントエンドエンジニアの振り返り】

プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

CSS

【CSS】hoverした時に別要素にアクションをさせる方法

今回はhoverした時に別の要素にアクションをつける方法を書きました。意外に躓くところなので、一読していただければと思います。脱初心者の為の内容となっています。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。