CSS

CSS★奇数・偶数・n番目の要素を指定するセレクタ

投稿日:2019年11月26日 更新日:

リストの表示で、奇数の li 要素にだけ効くCSS設定をしたかったので、調べてみた。

奇数番目の要素にスタイルを適用する

<span style="font-size: 130%;">li:nth-child(odd){
	background: #ff8080;
}</span>

参照サイト:http://ideahacker.net/2013/06/28/5571/

odd(奇数)、even(偶数)による指定方法

:nth-child(odd) ・・・ 奇数の要素を選択。
:nth-child(even) ・・・ 偶数の要素を選択。

n番目の要素を指定する

E:nth-child(n)
E:nth-of-type(n)

Eに指定したいHTML要素(Element)を書き、nにEの親要素の中で何番目を指定したいか値を書く。

参照サイト:https://stocker.jp/diary/nth-child/

もっとくわしく・・・

first-childの使い方
http://www.htmq.com/selector/first-child.shtml

何番目系のCSSリスト

種類-child-of-type
最初:first-child:first-of-type
 最初の要素
(親要素から見て、子要素すべての最初)
ある要素の最初
(親要素から見て、ある子要素の最初)
最後:last-child:last-of-type
 最後の要素
(親要素から見て、子要素すべての最後)
ある要素の最後
(親要素から見て、ある子要素の最後)
n番目:nth-child(n):nth-of-type(n)
 n番目ある要素のn番目
後ろからn番目:nth-last-child(n):nth-last-of-type(n)
Xの倍数:nth-child(Xn):nth-of-type(Xn)
X番目からYまで:nth-child(n+X)←X番目以降(X番目から最後まで)
 nth-of-type(n+X)←ある要素のX番目以降(X番目から最後まで)
 :nth-child(-n+X)←X番目以前(最初からX番目まで)
1個だけ:only-child:only-of-type
 1個だけ子要素がある(親要素から見て、子要素が1個だけある)1個だけある子要素がある(親要素から見て、ある子要素が1個だけある)

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

リストマーカや番号の左側の隙間について

<ol>や<ul>といった箇条書きを指定した場合、リストマーカや番号の左側に大きな隙間ができてしまう。 ここは、CSSで何も指定していなくても、ブラウザが気を利かせてある程度の …

CSS★display: inline-block;|しっかり理解しておこう!

CSSの設定では display をよく使うけれど、それぞれの要素の特徴は、ぼんやり把握しているだけだったので、ちょっと整理してみました。 特徴インライン要素ブロック要素インラインブロック要素要素の幅 …

coding programming css 1853305

CSSが更新されない!CSSのキャッシュを自動で読み直すWEBサイト更新テクニック

WEBサイトの更新時、クライアントさまから クライアント:「更新されていませんよ」 私:「お手数ですがキャッシュの削除をお願いできますか?」 クライアント:「キャッシュって何?…」 という不毛なやりと …

CSS★最後の要素だけスタイルを適用させない

最後の要素だけスタイルを適用させたくないときには、疑似要素を使って指定するのが定番。CSSにもいろんな書き方があるけど、便利な方法を見つけたのでメモしておく。 兄弟要素の最後の要素だけスタイルを適用し …

二重の打ち消し線にする方法

あるサイトの更新で、日付を打ち消し線で消して、次の行に新しく正しい日付を掲載するよう修正してほしいとの要望がありました。 打ち消し線は、cssでスタイルをもたせてやればスグにできます。   …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。