2016年11月7日
【CSS】n番目の要素を指定できる「nth-child」と「nth-of-type」の違いと方法
便利なn番目の要素を指定できる「nth-child」と「nth-of-type」ですが、違いや方法をメモメモ。
▼E:nth-child(n):親要素のn番目の子要素であるE要素
/* 最初の要素(親要素から見て、子要素すべての最初)*/ :first-child /* 最後の要素(親要素から見て、子要素すべての最後)*/ :last-child /* X番目 */ :nth-child(X) /* 最後からX番目 */ :nth-last-child(X) /* X番目以降 */ :nth-child(n+X) /* X番目以前 */ :nth-child(-n+X) /* 最後からX個 */ :nth-last-child(-n+X) /* 最後からX番目以前 */ :nth-last-child(n+X)
▼E:nth-of-type(n):親要素内で兄弟関係にあるE要素でn番目のもの
/* ある要素の最初(親要素から見て、ある子要素の最初)*/ :first-of-type /* ある要素の最後(親要素から見て、ある子要素の最後)*/ :last-of-type /* X番目 */ :nth-of-type(X) /* 最後からX番目 */ :nth-last-of-type(X) /* X番目以降 */ :nth-of-type(n+X) /* X番目以前 */ :nth-of-type(-n+X) /* 最後からX個 */ :nth-last-of-type(-n+X) /* 最後からX番目以前 */ :nth-last-of-type(n+X)
【参考】
何番目系の便利なCSSまとめ
CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い
関連記事
-
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
要素を左右だけではなく、上下左右中央に配置する方法は色々あるみたいですが、Flexboxを使って配置する方法をメモメモ。・・・ -
【CSS】BODY内で外部CSSを読み込む方法
【CSS】BODY内で外部CSSを読み込む方法
<head>内を変更できない場合、<body>の中で<link>を使ってCSSを読み・・・ -
【CSS】フッター要素を常に下に表示したい!CSSで!
【CSS】フッター要素を常に下に表示したい!CSSで!
コンテンツが少ないときなど、フッター要素が上にきてしまうので、なんか思ったんと違ーう!となってしまうケースありますよね。・・・ -
【CSS】iOSで横スクロールがカクカクするのを滑らか(スムーズ)にする方法
【CSS】iOSで横スクロールがカクカクするのを滑らか(スムーズ)にする方法
iOSで横スクロールをする際、カクカクとぎこちない感じになります。それを解決する方法をメモメモ。 [css] .imgS・・・ -
【CSS】CSSでよく使うメモ
【CSS】CSSでよく使うメモ
よく使うんだけど、覚えられないCSSをメモメモ。 ▼FontAwesomeでアイコンを表示 [css] :before ・・・ -
【CSS】Flexboxでレイアウト
【CSS】Flexboxでレイアウト
いままでfloatやJSで横並びのボックスを調整していましたが、楽になりますね~。 よく使いそうなものをメモメモ。 ▼f・・・