[CSS] CSS 선택자 모음

WebUI/CSS3

[CSS] CSS 선택자 모음

gangintheremark 2023. 7. 7. 14:53

728x90

🎈참고. CSS 선택자

1.1 기본 선택자

*
tag명
.클래스명
#id명
tag1, tag2
[속성명]
tag명[속성명]
[속성명=값] [속성명~=값] [속성명:=값] [속성명^=값] [속성명$=값]
tag > tag2
tag tag2
tag + tag2
tag ~ tag2

1.2 가상 클래스(Pseudo class) 선택자

:focus
:first-child :last-child :only-child
:nth-child(n)
:not(선택자)
:enable :disable
:checked
:empty
:link : 방문하지 않은 링크
:visited : 방문한 링크
:hover : 지정된 요소에 마우스가 올라간 경우
:active : 지정된 요소가 활성화된 경우

    a:link {
        /* 방문하지 않은 a 태그 */
    }
    a:visited {
        /* 방문한 a 태그 */
    }
    div:hover {
        /* 커서가 올라가 있는 div 요소  */
    }
    input:focus {
        /* 포커싱 되어있는 input 태그 */
    }
    button:active {
        /* 활성화한 버튼 */
    }

1.3 가상 요소(Pseudo element)

::after
::before
::selection : 드래그한 영역

<head>
    <style>
    #ex1::before {
        content: "왼쪽";
        color: blue;
    }

    #ex2::after {
        content: "오른쪽";
        color: green;
    }

    ::selection{
        background-color: aqua;
    }
    </style>
</head>
<body>
    <p id="ex1">가상요소</p>
    <p id="ex2">가상요소</p>
</body>

728x90