【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は以下の記事で取り上げたものです。
よろしければご覧ください。

WordPress(テーマ：Cocoon)で、複数の固定ページのSNSシェアボタンを非表示にする方法 | ミサキのノート
Cocoonで複数の固定ページの SNSシェアボタンを非表示に する方法は、子テーマの style.cssにコードを追記する。 例えば、SNSシェアボタンを 非表示にしたい固定ページの idが100, 101, 102なら 以下のように追記
misaki-blog.com

では。

—
YouTube: ミサキさん

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

コメント