要素は何番目？CSSのnth-child系/nth-of-type系のまとめ
所沢市でWebサイト制作や欧州輸入品販売などを行っているRishunTradingです。
今回は、要素の順番を指定してスタイルを適用する際に使用する疑似要素 nth-child、nth-of-typeについてまとめておこうと思います。
最初
| :nth-child | 最初の要素（親要素から見て、子要素すべての最初） |
|---|---|
| :first-of-type | ある要素に対して最初（親要素から見て、ある子要素の最初） |
最後
| :last-child | 最後の要素（親要素から見て、子要素すべての最後） |
|---|---|
| :last-of-type | ある要素に対して最後（親要素から見て、ある子要素の最後） |
1個だけ
| :only-child | 1個だけ子要素がある（親要素から見て、子要素が1個だけある） |
|---|---|
| :only-of-type | 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） |
X番目
| :nth-child(X) | X番目 |
|---|---|
| :nth-of-type(X) | ある要素に対してX番目 |
| :nth-child(Xn) | Xの倍数 |
| :nth-of-type(Xn) | ある要素に対してXの倍数 |
最後からX番目
| :nth-last-child(X) | 最後からX番目 |
|---|---|
| :nth-last-of-type(X) | ある要素に対して最後からX番目 |
X番目からYまで
| :nth-child(n+X) | X番目以降（X番目から最後まで） |
|---|---|
| :nth-of-type(n+X) | ある要素に対してX番目以降（X番目から最後まで） |
| :nth-child(-n+X) | X番目以前（最初からX番目まで） |
| :nth-of-type(-n+X) | ある要素に対してX番目以前（最初からX番目まで） |
最後からX個
| :nth-last-child(-n+X) | 最後からX個 |
|---|---|
| :nth-last-of-type(-n+X) | ある要素に対して最後からX個 |
最後からX番目以前
| :nth-last-child(n+X) | 最後からX番目以前 |
|---|---|
| :nth-last-of-type(n+X) | ある要素に対して最後からX番目以前 |
最後に
あまり使わないものもありますが、nth系の疑似要素について上げさせて頂きました。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
納品後は「Webサイト運用管理サービス(保守)」を締結しますので、納品後の運用やメンテナンスなどワンステップで対応。お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！(税別)で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
