スタッフブログ
CSS で
偶数・奇数・n番目
の指定
調べるとたくさんヒットするのですが、使うときに毎回 Google を検索しているので、よく使うものを載せておきたいと。
<ul> <li>1番目</li> <li>2番目</li> <li>3番目</li> <li>4番目</li> <li>5番目</li> <li>6番目</li> <li>7番目</li> </ul>
最初を指定
li:first-child{ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
最後を指定
li:last-child{ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
偶数を指定
li:nth-child(even){ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
奇数を指定
li:nth-child(odd){ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
上からn番目を指定
li:nth-child(3){ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
下からn番目を指定
li:nth-last-child(3){ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
上から3の倍数番目を指定
li:nth-child(3n){ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
上から2番目以降を指定
li:nth-child(n+2){ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
下から2番目以前を指定
li:nth-last-child(n+2){ background:#fcc; }
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
ホームページ制作を承ります
相模原市にある会社・店舗・事務所様からのご依頼大歓迎!
- 【士業】
- 弁護士(法律事務所),公認会計士,税理士,司法書士,行政書士,社会保険労務士など
- 【住まい】
- 不動産,工務店,建設・建築会社,設計事務所,リフォーム会社,建物管理会社,電気工事,水道工事など
- 【乗り物】
- 中古車ショップ,バイクショップ,自転車ショップ,自動車整備,運転代行など
- 【飲食業】
- レストラン,カフェ,甘味処,洋菓子店,パン屋など
- 【医療・福祉】
- 病院,クリニック,歯科医,整体院,接骨院,介護センターなど
- 【美容・健康】
- トレーニングジム,エステサロン,ネイルサロン,美容院,美容室など
- 【教育・育児】
- 専門学校,学習塾,幼稚園,保育園,認定保育園,カルチャースクール,パソコン教室など
- 【その他】
- イベントサイト,産業廃棄事業,リサイクルショップ,雑貨店,ペットショップ,旅館,楽天市場店舗・Yahoo!ストア・MakeShopなど
- 【外注元】
- デザイン事務所、広告代理店、ホームページ制作会社など
上記以外の業種でもホームページ制作・WEBシステム/アプリケーション開発につきましては、神奈川県相模原市中央区にあるオフィス木蓮までお気軽にご連絡・お問い合わせください。スマートフォン・タブレット対応、WordPress によるホームページ制作もお任せ下さい。他社が制作されたホームページでも対応します。また、ウェブアクセシビリティ(Webアクセシビリティ)対応のご相談も承ります。