classをワイルドカードで指定する

LastModified
Category CSS

概要

classを属性で指定してワイルドカードを使う

HTML


<ul>
    <li class="list-title-1">.list-title-1</li>
    <li class="list-data-1">.list-data-1</li>
    <li class="list-title-2">.list-title-2</li>
    <li class="list-data-2">.list-data-2</li>
    <li class="list-title-3">.list-title-3</li>
    <li class="list-data-3">.list-data-3</li>
</ul>

list-item で始まるものの文字色を青にする


li[class^="list-title-"] {
    color: blue;
}

最後が 1 で終わるものを太字にする


li[class$="1"] {
    font-weight: bold;
}

title が 含まれているものの文字を2remにする


li[class*="title"] {
    font-size: 2rem;
}

結果

  • .list-title-1
  • .list-data-1
  • .list-title-2
  • .list-data-2
  • .list-title-3
  • .list-data-3