HTML_CSS
Googleでログイン
問題14：CSSのセレクタをマスターしよう/その2
今回は、下記を実施してください。
クラスやidの付与はしないようにお願いします。
1. 奇数セレクタの指定
2. 偶数セレクタの指定
(※見本を参照して文字に書かれている色に変更してください)
3. 隣接セレクタの指定
4. 複数のセレクタの指定
クラスやidの付与はしないようにお願いします。
1. 奇数セレクタの指定
2. 偶数セレクタの指定
(※見本を参照して文字に書かれている色に変更してください)
3. 隣接セレクタの指定
4. 複数のセレクタの指定
あらかじめエディタに書くコード
<ul style="margin-bottom: 30px;">
<li>[奇数]文字赤色</li>
<li>[偶数]文字緑色</li>
<li>[奇数]文字赤色</li>
<li>[偶数]文字緑色</li>
<li>[奇数]文字赤色</li>
<li>[偶数]文字緑色</li>
</ul>
<div>
<span style="display: block">下の文字を太くしてください</span>
<span style="display: block">この文字を太くしてください</span style="display: block">
<i style="margin-top: 30px;display: block">この文字を青色に</i>
<p>この文字を青色に</p>
</div>
¥HTML¥
期待する画面
解答ソースコード
<ul style="margin-bottom: 30px;">
<li>[奇数]文字赤色</li>
<li>[偶数]文字緑色</li>
<li>[奇数]文字赤色</li>
<li>[偶数]文字緑色</li>
<li>[奇数]文字赤色</li>
<li>[偶数]文字緑色</li>
</ul>
<div>
<span style="display: block">下の文字を太くしてください</span>
<span style="display: block">この文字を太くしてください</span style="display:block">
<i style="margin-top: 30px;display: block">この文字を青色に</i>
<p>この文字を青色に</p>
</div>
¥HTML¥
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
ul > li:nth-child(odd) {
color: red;
}
ul > li:nth-child(even) {
color: green;
}
div > span + span {
font-weight: bold;
}
i,p {
color: blue;
}
¥CSS¥
補足
前回実施したCSSセレクタの指定方法とはまた異なった指定方法が出てきました。
疑似クラスのnth-childは、子要素の番号などを指定してスタイルを適用させることができます。
n番目の要素のみにスタイルを指定したい場合は、nth-child(n)のように使用します。
例えば今回の問題であれば上から4番目の「[偶数]文字緑色」だけのスタイルを変えるのであればnth-child(4)と指定すれば良いでしょう。
奇数や偶数の指定であれば今回使用したキーワード指定か倍数を表すnを数字の後に付け加えればいいです。
奇数の場合「2n + 1」、偶数の場合「2n」で指定できます。
疑似クラスのnth-childは、子要素の番号などを指定してスタイルを適用させることができます。
n番目の要素のみにスタイルを指定したい場合は、nth-child(n)のように使用します。
例えば今回の問題であれば上から4番目の「[偶数]文字緑色」だけのスタイルを変えるのであればnth-child(4)と指定すれば良いでしょう。
奇数や偶数の指定であれば今回使用したキーワード指定か倍数を表すnを数字の後に付け加えればいいです。
奇数の場合「2n + 1」、偶数の場合「2n」で指定できます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
奇数は:nth-child(odd)を指定し、
偶数は:nth-child(even)を指定してあげましょう。
隣り合うものは span + spanのように+を使用します。
複数セレクタは , を使用しましょう。