【CSS】子孫セレクタと複数クラス要素を指定するセレクタとの違い

この記事では、間違いやすいセレクタである、子孫セレクタと複数クラス要素を指定するセレクタとの違いについて説明します。

先に概要を述べます。
子孫セレクタはセレクタをスペースで区切ります。一方、複数クラス要素を指定するセレクタはスペースで区切りません。
たったこれだけのことですが、間違いやすいので注意が必要です。

ミサキ

知識はあっても、スペースを見落とすことがありますよね。
疲れているときは特に(・_・;)

子孫セレクタと複数クラス要素を指定するセレクタとの違い

子孫セレクタの例は、以下の.page-id-100 .sns-shareです。

.page-id-100 .sns-share {
             display: none;
}

このセレクタは、クラスが page-id-100 となる要素の内側にある sns-share クラスの要素を指定しています。
大事な点は、.page-id-100 と .sns-share との間にはスペースがある点です。

一方、複数クラス要素を指定するセレクタの例は、以下の.page-id-100.sns-shareとなります。
（先ほどの例に合わせてちょっと無理やり作っちゃいました）
子孫セレクタとの違いは、スペースが無い点ですね。

.page-id-100.sns-share {
             display: none;
}

ちなみに、複数クラス要素とは、以下のようにクラスが複数指定された要素のことです。

     <div>
          <button class="page-id-100 sns-share">...</button>
     </div>

子孫セレクタの使用例は以下の記事でも取り上げているので、よろしければ参考にしてください。

では。

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)