[CSS] 의사 클래스

Nux·2022년 4월 28일
웹

의사 클래스

  • 특정 상태에 대한 정의를 내릴 때 사용

동적 의사 클래스

  • 특정 행동(action)과 연관된 요소 선택
의사클래스설명
:link사용자가 방문하지 않은 링크
:visited사용자가 방문 한 링크
:hover마우스가 올라간 상태
:active활성화 되어 있는 상태
:focus이벤트나 양식의 입력 칸 등 포커스를 받은 상태

상태 의사 클래스

  • 특정한 상태를 가지고 있는 요소 선택
의사클래스설명
:checkedinput의 checkbox나 radio의 체크 된 요소
:enabledinput에서 사용할 수 있는 요소
:disabledinput에서 사용할 수 없는 요소

구조 의사 클래스

  • 특정 위치에 있는 요소 선택
의사클래스설명
:first-child선택자의 자식요소 중 첫번째 자식요소 선택
:last-child선택자의 자식요소 중 마지막 자식요소 선택
:nth-child(n)선택자의 자식요소 중 n번째 자식요소 선택
:nth-last-child(n)선택자의 자식요소 중 맨 끝에서 n번째 자식요소 선택
<body>
	<div class="test">
        <p>
            <span>첫번째</span> <!-- first-child -->
            <span>두번째</span> <!-- nth-child(2) -->
            <span>세번째</span> <!-- nth-last-child(2) -->
            <span>네번째</span> <!-- last-child -->
        </p>
    </div>
</body>

의사 요소

  • 선택한 요소의 일부분만 선택
의사 요소설명
::first-letter첫번째 글자 선택
::first-line화면에 나타나는 첫번째 줄 선택
::selection드래그한 글자들을 선택
::before선택자의 바로 앞 부분 선택
::after선택자의 바로 뒷 부분 선택
profile
Nux
이전 포스트

자료구조

다음 포스트

[CSS] 미디어쿼리

0개의 댓글