Googleでログイン
Twitterでログイン
問題
CSSの指定セレクタ第2段です。
今回は、下記を実装してください。
1,奇数セレクタの指定
2,偶数セレクタの指定
3,隣接セレクタの指定
4,複数のセレクタ
文字に書かれている色にしてください（見本参照）
また今回はセレクタの問題の為、クラスやidの付与はしないようにお願いします。
今回は、下記を実装してください。
1,奇数セレクタの指定
2,偶数セレクタの指定
3,隣接セレクタの指定
4,複数のセレクタ
文字に書かれている色にしてください（見本参照）
また今回はセレクタの問題の為、クラスやidの付与はしないようにお願いします。
自分の環境に書くコード
<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¥
1.HTMLの宣言をしてみよう
解説
まず奇数偶数の指定から。
奇数は:nth-child(odd)を指定
偶数は:nth-child(even)を指定してあげましょう。
隣り合うものは span + spanのように+を使用します。複数セレクタは
,を付与してあげましょう。