[CSS]連番のIDやクラスをまとめて指定する書き方

Read More

連番になっているようなIDクラスCSSでまとめて指定する必要性が出てきた。


調べてみるとjavasと同じような指定の仕方でいけるようだ。
ということでメモ。



まずは連番IDを適当に作ってみる。
<html>
<body>
  <div id="test_1">test_1</div><br />
  <div id="test_2">test_2</div><br />
  <div id="test_3">test_3</div><br />
  <div id="test_4">test_4</div><br />
  <div id="test_5">test_5</div><br />
</body>
</html>


上記のHTMLを表示したイメージ。




これをまとめてCSSで指定するには以下のように書く。
/* IDの連番をまとめて指定する */
[id^="test_"] {
  background: #FFC0CB;
}


CSSを適用した結果。




これが仮にIDではなくクラスの連番だったとして指定方法はほぼ同じ。
/* クラスの連番をまとめて指定する */
[class^="test_"] {
  background: #FFC0CB;
}

idがclassになっただけ。


上記2つを覚えておけばとりあえず問題なさそうな気がする。




--
まとめ。


使う機会は少なそうだけど他の指定パターンも一緒にメモ。
■いろんな指定パターン
/* 連番クラス名をまとめて指定(前方一致)。ex) test_1 */
[class^="test_"] {
  background: #FFC0CB;
}

/* 連番クラス名をまとめて指定(後方一致)。ex) 1_test */
[class$="_test"] {
  background: #FF00FF;
}

/* 連番クラス名をまとめて指定(部分一致)。ex) 1_test_1 */
[class*="test"] {
  background: #FFFF00;
}

/* 連番IDはclassがidに置き換わるだけなので省略 */

便宜上、連番クラス名に1_testとか使っちゃったけど数値から始まるクラス名は使わない方がいいと思う。
まあプログラム経験がある人なら自然と外すと思うけど。


同様に記号から始まるクラス名もNG。
別の解釈をされちゃう可能性があるので。







Category "HTML・JS・CSS" の最新記事