擬似クラス奇数・偶数・n番目など、要素を指定する – お仕事手帳bloominc

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

MENU

css

擬似クラス奇数・偶数・n番目など、要素を指定する

2018/08/27

擬似クラス

リストでよく使いそうな擬似クラスをピックアップ

html

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
  <li>項目5</li>
</ul>

1

2

3

4

5

6

7

<ul>

<li>項目1</li>

<li>項目2</li>

<li>項目3</li>

<li>項目4</li>

<li>項目5</li>

</ul>

最初の要素

:first-child

1	:first-child

最後の要素

:last-child

1	:last-child

奇数番目

:nth-child(odd)

1	:nth-child(odd)

偶数番目

:nth-child(even)

1	:nth-child(even)

上からn番目

:nth-child(2)

1	:nth-child(2)

下からn番目

:nth-last-child(2)

1	:nth-last-child(2)

参考URL　http://ideahacker.net/2013/06/28/5571/