はじめに
Sassを使った実装の時によく使われていたので、備忘録として残します。
目次
- :nth-of-type(n)とは
- 使用例
- 参考サイト
E:nth-of-type(n)とは
ターゲット要素(E)と同じタイプ（タグ）で兄弟関係にある要素に対してスタイルを適用します。
使用例
①html
<!DOCTYPE html>
<!-- ここからがhtmlタグ/ルート要素 -->
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>果物</h1>
<p>
りんご
</p>
<p>
バナナ
</p>
<div>
トマト？
</div>
<p>
キウイ
</p>
<p>
パイナップル
</p>
<h1>fruits</h1>
<p>
オレンジ
</p>
<p>
みかん
</p>
<p>
ぶどう
</p>
<p>
かき
</p>
</div>
</body>
</html>
②CSS
p:nth-of-type(odd) {
color: white;
background-color: black;
}
p:nth-of-type(n + 8) {
/* p要素で兄弟関係にある8番目の要素からスタイルを適用。 */
color: blue;
background-color: yellowgreen;
}
h1:nth-of-type(2) {
color: red;
font-weight: 500;
}
div:nth-of-type(2) {
/* div要素で兄弟関係にある２番目の要素がないため、スタイルはなし。 */
color: pink;
font-size: large;
}
③結果
参考サイト
http://www.htmq.com/selector/nth-of-type.shtml
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type