例えば、.row-1〜row-20まであって全てに同じスタイルを指定したい場合
①20回同じことを書く
②row-0を用意して、row-0とrow-xx(xxは1〜20の値)の両方を指定する
<div class=”row-0 row-20″>のように
③スタイルシートに正規表現を使う
が考えられると思います。2つや3つなら①の方法で同じことを書いちゃう場合もありますが、数が多かったり、HTMLコード側はもう書いてしまっていたり、あるいは、あとからまとめてスタイルを変更する可能性がある場合などは、③の正規表現を使うのがベストですよね~
で
書き方としては
[class^="row-"] {
padding-left:20px;
padding-top:30px;
}
みたいな
beforeやafterの疑似要素に対しても使えます
[class^="row-"]:after {
display: table;
content: " ";
clear: both;
}
こんな感じですね。