【CSS】複数記載した同じスタイルをひとまとめにする方法

この記事では、CSSにおいて、複数記載した同じスタイルをひとまとめにする方法について説明します。

先に簡単に説明します。
セククタをカンマ(,)で区切って並べれば、複数記載した同じスタイルをひとまとめにできます。

ミサキ
ミサキ

簡単なことですが、見落しているかも知れませんね。
これを機会に同じスタイルはひとまとめにしましょう!

複数記載した同じスタイルをひとまとめにする方法

例えば、以下のようなCSSがあるとします。

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

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

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

同じスタイル

    {
        display: none;
    }

が複数記載されていますよね。

これは、以下のようにセレクタをカンマで区切って並べれば、ひとまとめにすることができます。

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

今回の例では、スタイルが一行(display: none;)しかなかったので、その効果が分かりにくいかも知れません。
でも、スタイルが何行もあった場合をイメージしてみて下さい。
見やすくなりますし、「一箇所だけ他と違う書き方をしてしまった」なんてことが無くなりますよね。

おわりに

CSSの書き方は最初から全て覚える必要は無いと思います。
でも、今回説明したものは基本的なものです。
ぜひ覚えましょう!

今回のCSSは以下の記事で取り上げたものです。
よろしければご覧ください。

では。


YouTube: ミサキさん

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

スポンサーリンク
記事を書いている人
ミサキ

プログラマ(@東京の国立研究所)として働きながら,占い師(の卵)としても活動しています.そのため,占いモニターを定期的に募集しています!⇒占いモニターのページ.実は,天文学の博士でもあります☆彡

詳しいプロフィールはこちら

ミサキをフォローする
WordPress
スポンサーリンク
ミサキをフォローする
プログラマー&天文博士&占い師 ミサキのブログ

コメント

タイトルとURLをコピーしました