CSSのセレクタをマスターしよう/その1

解答ソースコード

              <section>
    <div class="cat-red">この文字を赤にしてください</div>
    <p id="catBlue">この文字を青色にしてください</p>
    <input placeholder="プレイスホルダーを緑に指定" name="green" type="text" style="width: 200px;">
    <div data-text="target">この文字をピンクにしてください</div>
    <ul style="margin-top: 30px;">
        <li>リストの最初の文字(赤色)</li>
        <li>サンプルテキスト</li>
        <li>サンプルテキスト</li>
        <li>サンプルテキスト</li>
        <li>リストの5番目(緑色)</li>
        <li>サンプルテキスト</li>
        <li>サンプルテキスト</li>
        <li>リストの最後の文字(青色)</li>
    </ul>
</section>
¥HTML¥
            

              .cat-red {
    color: red;
}
#catBlue {
    color: blue;
}
input[name="green"]::placeholder {
    color: green;
}
[data-text="target"] {
    color: pink;
}
ul {
    list-style: none;
}
ul li:first-child {
    color: red;
}
ul li:last-child {
    color: blue;
}
ul li:nth-child(5) {
    color: green;
}
¥CSS¥