CSS練習

shigy

練習問題
コメントアウトに記載の要素にスタイルを適用させる。
セレクタ、HTMLどこでも修正してよい。

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                color: blue; /*親div*/
            }

            .child {
                color: rgb(29, 223, 65); /*子div*/
            }

            div span {
                color: brown; /*子span*/
            }

            div div {
                color: hotpink; /*孫div*/
            }

            div.child {
                color: red; /*特殊div*/
            }
        </style>
    </head>

    <div>
        親div
        <div class="child">
            子div
        </div>
    </div>

    <div>
        親div
        <div class="child">
            子div
            <span class="child">子span</span>
            <div class="child">孫div</div>
            <div class="child">特殊div</div>
        </div>
    </div>
</html>

答え

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                color: blue; /*親div*/
            }

            div.child {
                color: rgb(29, 223, 65); /*子div*/
            }

            span.child {
                color: brown; /*子span*/
            }

            div.child div {
                color: hotpink; /*孫div*/
            }

            #special  {
                color: red; /*特殊div*/
            }
        </style>
    </head>

    <div>
        親div
        <div class="child">
            子div
        </div>
    </div>

    <div>
        親div
        <div class="child">
            子div
            <span class="child">子span</span>
            <div class="child">孫div</div>
            <div class="child"id="special">特殊div</div>
        </div>
    </div>
</html>

この記事が気に入ったらサポートをしてみませんか？