121강. nth-child 적용

2019. 2. 12. 23:20Front End 강의내용

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        h2{

            text-align: center;

        }

        ol{

            list-style-type: none;

/* 리스트 숫자 없애기 */

        }

        ol li{

            padding: 20px;

            color: #fff;

        }

        

        ol li:nth-child(odd){

            background-color: teal;

        }

        /*        홀수번째 적용*/

        ol li:nth-child(even){

            background-color: cadetblue;

        }

        /*        짝수번째 적용*/

        ol li:last-child{

            text-decoration: line-through;

        }

        /*        마지막꺼 적용*/

        ol li:first-child{

            background-color: gold;

        }

        /*        첫번째거 적용*/

    </style>

</head>

<body>

    <h2>Top 5 Programming Languages</h2>

    <ol>

        <li>Javascript</li>

        <li>Python</li>

        <li>C++</li>

        <li>GO</li>

        <li>Java</li>

    </ol>

</body>

</html>