id属性にcssをあてる方法【id=”hoge_1″】などの場合

今回はid=”hoge”だけの場合ならシンプルに以下のように記述すればOKです。

td {
        text-align: center;
        font-size: 15px;
        height:20px;
        color:#575757;
      }

しかし何らかの理由でid=”hoge_1″からid=”hoge_15″まで存在していて、その全てに同じcssを適用させたい場合などにメンテナンスの観点から同じcssコードを15回コピペするわけにもいきません。
ではどのようにすれば良いか説明します。

この記事の対象者

規則性のあるid属性に一括でcssをあてる方法を知りたい方

今回は既にclassに何かしら割り当てていて変更したくないという状況下と仮定して解説します。

早速ですが以下のcssコードになります。

[id^="hoge_"] {
        width:100px;
        height:30px;
        background-color: #92C6CA;
        text-decoration: none;
        text-align: center;
        padding:5px 5px;
        color: #ffffff;
        border-radius: 5px;
        margin-bottom: 5px;
      }

        [id^="hoge_"]:hover{
            background-color: #b1e0e3;
            text-decoration: none;
            color: #8d8d8d;
            transition: 0.5s;
        }

上記のコードでid=”hoge_”が含まれるコードは一括でcssが適用されます。

まとめ

今回は規則性のあるid属性にcssを割り当てる方法を紹介しました。1つのページに同じid属性を複数持つことは禁止されていますので、その特性上どうしてもtest_1、test_2、test_3などの一意の値を割り当てる事があります。その時に今回のコードを利用すると一括で割り当てる事が出来るので便利です。これを考えた人、天才です。