HTML&CSS 16일차 (정리x)

💜 HTML,CSS
HTML&CSS 16일차 (정리x)

Genie_. 2024. 3. 23. 22:07
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>가상선택자(중요!!)</title>

</head>
<style>
    section{
        width: 500px;
        height: 500px;
        background-color: #c8e5ff;
    }
    /* section"이면서" 첫번째 자식인 것 */
    section:first-child{
        background-color: #d4ffca;
    }
    /* section"이면서" 마지막 자식인 것 */
    section:last-child{
        background-color: #d4ffca;
    }
    li:nth-child(odd){ /* even: 짝수 odd: 홀수 */
        color: red;
    }

    li:nth-child(2){ /* 두번째자식은 span이므로 해당하는것 없음 */
        color: blue;
    }

    /* li인데 첫번째 자식이 아닌 li */
    li:not(:first-child){
        background-color: #ffd6de;
    }
    li:first-child::after {
        /*
        before: 앞에 내용추가/ after: 뒤에 내용추가
        단점 : 결과창에서 드래그 안됨, 웹사이트에서 f12했을때 내용이 나오지않음
        */
        content: "NEW!!";
        background-color: red;
        color: white;
        font-weight: bold;
        border-radius: 2px;
        margin: 0 10px;
        padding: 0 10px;
    }

</style>
<body>
<!-- 가상클래스는 자식 선택은 있어도 부모 선택하라는건 없음(= 거꾸로 거슬러 올라갈 수 없음) -->
    <div>
        <ul>
            <li>1</li>
            <span>23</span>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>

    <main>
        <section>SECT1</section>
        <section>SECT2</section>
        <section>SECT3</section>
    </main>

</body>
</html>
728x90
저작자표시 비영리 변경금지