クリエイター：コーディング備忘録ブログ

RSS

コーディング

nth-childのネガティブ指定

2017.12.27

nth-childはリスト構造など、同じ要素が多く連なる場合、5番目の要素に指定したり3の倍数の要素に、
cssの指定をしたりなど、多くの場面で活用できる擬似要素です。

実は、nth-childにはネガティブな値も指定できます。

<ul id="sample">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
<ul>
 
#sample li:nth-child(-n+5) {
  color:green;
}

1

2

3

4

5

6

7

8

9

10

11

12

<ul id="sample">

<li>テキスト</li>

<li>テキスト</li>

<li>テキスト</li>

<li>テキスト</li>

<li>テキスト</li>

<li>テキスト</li>

<ul>

#sample li:nth-child(-n+5) {

color:green;

}

上記では、最初から5番目の要素までフォントの色が緑になります。

この記事を見た人は次の記事も見ています。

コーディングを速くする「EMMET」

前の記事

ネガティブマージン

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

padding

2017.01.06

コーディング

画像の下に回り込みをしない

2017.07.18

コーディング

フォントサイズをjQueryを使って変更

2018.03.15

コーディング

カスタムフィールドの値で投稿一覧をソートする

2019.05.17

コーディング

テキストの縦方向の中央揃え

2017.07.20

コーディング

システムである条件の時だけ表示される要素に紐づけして表示させる

2017.03.31