初心者のうちに知っときゃよかったCSSセレクター

今回の話って誰向き？

この記事の内容は、CSSセレクターを初めて使う人、初心者にはぜひ見てほしい...
(初心者じゃなくても復習がてら見ていただきたいです。)

今になって、初めてCSSセレクターを使用したときに、
知っていればよかった
知っていたがこんなに使用するものだと思っていなかった
と感じたものを紹介していきます。

CSSセレクター３つ紹介

今回、紹介するものは３点！
1..A.B
2..A:nth-child()
3..A + .B

では、さっそく...

1..A.B

こいつ、すごい出てきたんですけど、そんなに重要なものだと思っていなかった。
君の存在は知っていたんだよ....

何がめちゃめちゃ使えるポイントかって？
とりあえず使用例を見てみようー.........

.button {
  width: 200px;
  background-color: red;
  border-radius: 4px;
}

.button.is-small {
  width: 100px;
}

.button.is-large {
  width: 300px;
}

.button.is-blue {
  background-color: blue;
}

.buttonにクラスを一つ追加するだけで大きさや背景色を変更することができる。
また、.button.is-smallとクラス名が２つ続いていたら、.button.is-smallのwidth: 100px;が適用される。(.buttonのwidth: 200px;は上書きされてるよ。ディベロッパーツールで見たらwidth: 200px;ってなってる。)

2..A:nth-child()

<div class="box">
  <p>サンプルテキスト<p>
  <p>サンプルテキスト<p>
  <p>サンプルテキスト<p>
</div>


<style>
.box:nth-child(2) {
  font-size: 20px;
}
</style>

上記の例では.boxの2番目の子要素のみにスタイルを適用することができる。

:nth-child()　←( )内に記載する値によって、該当箇所のスタイルを変更することができる。

詳しくはこちら

3..A + .B

こいつを知ったときはマジですごいと思った。
使用例は

<ul class="box-list">
  <li class="box-list-item">
    <div class="box"></div>
  </li>
  <li class="box-list-item">
    <div class="box"></div>
  </li>
</ul>

<style>
.box-list-item + .box-list-item {
 margin-top: 30px;
}
</style>

.box-list-itemの後に.box-list-itemが書かれてたら、margin-top: 30pxをとる。

CSSを勉強し始めの時に、覚えておけばもっと楽に実装できた箇所があったかもしれない。。。。