CSS_가상 선택자

diary100 2023. 3. 30. 16:21

https://coding-diary100.tistory.com/45

CSS_ 기본 개념과 문법

CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다

coding-diary100.tistory.com

가상 선택자

- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택

li: first-child
li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용

ex) ul>li:first-child {color:deeppink;}

li:last-child
li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용

li:nth-child(n)
li 요소 중에서 n번째 해당하는 요소의 스타일을 적용

li:nth-child(odd)
li 요소 중에서 홀수번째 해당하는 요소의 스타일을 적용

li:nth-child(even)
li 요소 중에서 짝수번째 해당하는 요소의 스타일을 적용

코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상선택자</title>
    <style>
        .list>li:first-child{color: deeppink;}
        .list>li:nth-child(2){color: gold;}
        .list>li:nth-child(odd){background-color: greenyellow;}
        .list>li:nth-child(even){color: black;}
        .list>li:last-child{color: white;}

        a:link{color: greenyellow; text-decoration: none;}
        a:visited{color: deepskyblue; text-decoration: none;
        }
        a:hover{ text-decoration: underline;}
        a:active{color: red; text-decoration: underline;}
    </style>
</head>
<body>
    <h2>가상 선택자</h2>
    <ul class="list">
        <li>첫번째</li>
        <li>두번째</li>
        <li>세번째</li>
        <li>네번째</li>
    </ul>
    <p><a href="http://python.org">파이썬 공식 홈페이지</a></p>

</body>
</html>

결과