用途
新着
履歴
分類

CSS a番目とb番目の間を選択

CSS a番目とb番目の間を選択
同じ要素の中で、指定された番目の要素から、指定された番目の要素までだけ、選択するセレクタのサンプルです。

同じデザインの連続した要素の中で、一部分だけスタイルを反映したときがあります。

そんな時のサンプルです。

以下のサンプルは3番目から6番目だけ色を変えています。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

ポイントはこの部分。

ul.demo li:nth-child(n+3):nth-child(-n+6)

CSSの全体はこちら。

    ul.demo{
        list-style-type: none;
        padding: 0;
    }
    ul.demo li{
        width: 100px;
        text-align: center;
        border: solid 1px #999;
        margin: 0 0 10px;
    }

    ul.demo li:nth-child(n+3):nth-child(-n+6){
        background-color: #99c;
        color: #FFF;
    }

HTML

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
公開 2022-01-23 20:12:47
更新 2022-01-31 00:50:16
このページの二次元コード
CSS a番目とb番目の間を選択

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2022 kipure
Top