番号指定の擬似クラス ①「 -of-type」

同じ要素を持った子要素のうち特定の箇所にのみにスタイルを適用したい場合、
対象の要素を持つタグを順番に数え、番号を指定した擬似クラスを使用する。

: nth-of-type(n)

 
子要素のうち、指定された要素を持つタグの中で先頭からn番目にスタイルを適用する。

– CSS –
h4タグで擬似クラス:nth-of-typeを用い、末尾のカッコ内に番号1を指定する。

– HTML –

 
子要素の内 ※先頭から1番目のh4タグにのみスタイル、colorプロパティが適用される。
 

※ :nth-last-of-type(n)とすることで先頭からでなく末尾からn番目と数えるようになる。
 


: nth-of-type(odd) & : nth-of-type(even)

子要素のうち、

: nth-of-type(odd)
指定された要素を持つタグの中で奇数番号の要素にスタイルを適用する。
: nth-of-type(even)
指定された要素を持つタグの中で偶数番号の要素にスタイルを適用する。

– CSS –

– HTML –

 
奇数と偶数でliタグ内の文字に指定する色を分ける事が出来た。
 



: first-of-type & : last-of-type

子要素のうち、
指定された要素を持つタグの中で奇数番号の要素にスタイルを適用する。

 

: first-of-type
指定された要素を持つタグの中で先頭のタグにスタイルを適用する。
(※:nth-of-type(1)と結果として同じ意味になる)
: last-of-type
指定された要素を持つタグの中で末尾のタグにスタイルを適用する。

– CSS –

– HTML –

 
pタグのうち先頭と末尾のタグにcolorプロパティが適用される。
 

Follow me!

番号指定の擬似クラス ①「 -of-type」” に対して1件のコメントがあります。

コメントを残す

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

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