(タグ名):first-child{
(スタイル記述)
}
(スタイル記述)
}
スタイルシートを用いて特定の位置にある子要素のスタイルを設定するコードを紹介します。
最初の要素のスタイルを設定する場合は"first-child"疑似クラスを用います。
n番目の子要素のスタイルを設定する場合は、"nth-of-type"疑似クラスを用います。
下記コードを記述します。
li {
color:#2020A0;
}
li:first-child {
color:#A020A0;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="ChildSelector.css" />
</head>
<body>
<ul>
<li>最初の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
</ul>
<ol>
<li>最初の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
</ol>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。最初の要素の文字色が別の色で描画されます。
li {
color:#2020A0;
}
li:nth-of-type(4) {
border:2px #00ff21 solid;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="ChildSelector.css" />
</head>
<body>
<ul>
<li>最初の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
</ul>
<ol>
<li>最初の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
</ol>
</body>
</html>
li:nth-of-type(4) {
border:2px #00ff21 solid;
}
"nth-of-type(4)"を指定することにより、4番目の要素のスタイルを指定できます。上記の例では"border"プロパティを設定して枠を描画するスタイルに変えています。
上記のHTMLファイルをWebブラウザで表示すると、下図の画面が表示されます。4番目の要素に枠が描画されます。
