Specify class as a wildcard

LastModified
Category CSS

概要

Use wildcards with class attributes

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>

Make the character color blue of the one beginning with list-item


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

Bold the last one with 1


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

Character of the title contains 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