본문 바로가기

HTML&CSS

CSS 선택자 고급 - 전체 가상 클래스(Pseudo Class) 선택자 요약

반응형

입력 요소(<input>) 가상 클래스

가상 클래스 설명
:checked 체크한 입력 요소(<input>)를 선택.
라디오박스와 체크박스 한정
input:checked
form input[type="radio"]:checked
.item:checked+label
:disabled 사용 불가 상태인 입력 요소(<input>)를 선택. input:disabled
:enabled 사용 가능 상태입 입력 요소(<input>)를 선택.
:disabled 로 설정하지 않은 입력 요소는 모두 :enabled 임.
input:enabled
:focus 포커스가 위치한 입력 요소(<input>)를 선택.
마우스 클릭, 또는 탭 키로 활성화 된 입력 요소 1개를 선택.
input:focus
:in-range 특정 범위 안의 값을 가진 입력 요소(<input>)를 선택.
입력 값의 범위를 가지는 입력 요소 한정으로 사용되며, 입력 요소 속성 min, max 값으로 범위를 지정함.
<input id="agerange" name="age" type="number" placeholder="1 to 10" min="1" max="10" value="5">
자바스크립트 없이 입력 값의 사전 체크를 할 수 있음.
input:in-range
:invalid 비 정상 값을 가진 입력 요소(<input>)를 선택.
타입이 지정된 입력 요소에 올바르지 않은 값이 들어간 경우 선택됨.
<input type="email" id="email_input" value="email.domain.com" required>
input:invalid
:optional 필수 항목 속성(required)이 지정되지 않은  입력 요소(<input>)를 선택.
<input type="text" id="userid" value="" required>
input:optional
:out-of-range 특정 범위를 벗어난 값을 가진 입력 요소(<input>)를 선택.
입력 값의 범위를 가지는 입력 요소 한정으로 사용되며, 입력 요소 속성 min, max 값으로 범위를 지정함.
<input id="agerange" name="age" type="number" placeholder="1 to 10" min="1" max="10" value="12">
자바스크립트 없이 입력 값의 사전 체크를 할 수 있음.
input:out-of-range
:read-only 읽기 전용 속성(readonly)이 적용된 입력 요소(<input>)를 선택.
입력 요소에 읽기 전용 속성은 "readonly" 키워드를 사용하며, 가상 클래스는 "read-only"를 사용하는 점에 주의해야 함.
input:read-only
:read-write 읽기 전용 속성(readonly)이 적용되지 않은 입력 요소(<input>)를 선택. :read-only 가상 클래스에 대응. input:read-write
:required 필수 항목 속성(required)이 지정된  입력 요소(<input>)를 선택.
<input type="text" id="userid" value="" required>
:optional 가상 클래스에 대응.
input:required
:valid 정상 값이 입력된 모든 입력 요소(<input>)를 선택. input:valid

 

 

링크 가상 클래스

가상 클래스 설명
:active 활성화 된 링크.
<a>, <button> 요소에 사용하며, 마우스 왼쪽 버튼을 누를 때 링크가 활성화 된 상태입니다.
a:active
:hover 마우스 호버 상태인 링크. a:hover
p:hover
.item:hover
:link 방문하지 않은 링크. a:link
:visited 방문한 링크. a:visited

 

 

요소(들) 선택 가상 클래스

가상 클래스 설명
:empty 자식 요소가 없는 요소를 선택 p:empty
div:empty
:first-child 부모 요소의 첫 번째 자식 요소를 선택 p:first-child
article p:first-child
.item:first-child
:first-of-type 부모 요소의 자식 요소들 중 특정 태그 타입의 첫 번째 요소를 선택. 클래스로 자식 요소를 선택 시, 자식 요소들의 모든 태그 타입별로 첫 번째 요소를 선택함. p:first-of-type
.item:first-of-type
:last-child 부모 요소의 마지막 자식 요소를 선택 p:last-child
:last-of-type 부모 요소의 자식 요소들 중 특정 태그 타입의 마지막 요소를 선택. 클래스로 자식 요소를 선택 시, 자식 요소들의 모든 태그 타입별로 첫 번째 요소를 선택함. p:last-of-type
.item:last-of-type
:not 선택한 요소들 중 괄호 안의 조건에 해당 하는 것을 제외한 나머지 요소(들). :not(x) 로 조건을 표현.
조건으로는 태그, 클래스, 가상 클래스, 속성이 올 수 있음.
p:not(".item")
input:not(:disabled)
:nth-child 서수로 n번째 오는 요소를 선택.
수식을 사용해 반복해서 요소(들)을 선택.
p:nth-child(2n+1)
:nth-last-child 서수로 n번째 오는 요소를 끝에서부터 선택.
수식을 사용해 반복해서 요소(들)을 선택.
p:nth-last-child(2n+1)
:nth-last-of-type 서수로 n번째 오는 특정 태그인 요소를 끝에서부터 선택.
수식을 사용해 반복해서 요소(들)을 선택.
p:nth-last-of-type(2n+1)
:nth-of-type 서수로 n번째 오는 특정 태그인 요소를 선택.
수식을 사용해 반복해서 요소(들)을 선택
p:nth-of-type(2n+1)
:only-child 1개의 자식 요소만 가지고 있는 부모 요소의 자식 요소를 선택. 부모 요소의 자식 요소가 태그 종류에 관계 없이 1개만 있음.

<div>
    <p>유일한 자식 요소</p>
</div>

"p:only-child" 으로 유일한 자식 요소를 선택.
p:only-child
.content div:only-child
.item:only-child
:only-of-type 자식 요소(들) 중 특정 태그가 1개만 있는 부모 요소의 자식 요소를 선택. 특정 태그 외에 다른 태그(들)이 있을 수 있음.
":only-child" 를 포함함.

<div>
    <p>유일한 문단 요소</p>
    <div></div>
    <div></div>
</div>

"p:only-of-type" 으로 유일한 문단 요소선택.
p:only-of-type
:root 문서 루트 요소를 선택. :root

 

태그 속성 가상 클래스

가상 클래스 설명
:lang "lang" 속성에 지정된 언어 속성 값에 따라 요소를 선택.
다국어 페이지 지원을 위해 HTML 페이지 안에 다국어 내용을 모두 표시하는 경우, 내용을 구분하기 위해 사용하는 "lang" 속성을 구분해 선택하기 위해 사용.(영어: en, 한글: ko, 중국어: zh/zh-Hans/zh-Hant, 일본어: ja, 그외 ISO 639-1 언어 코드 표준(www.w3.org/WAI/ER/IG/ert/iso639.htm)을 따름)

<p lang="ko">한글내용</p>
<div lang="fr">프랑스어내용</div>
p:lang("ko")
:target HTML 페이지 안의 앵커 링크를 클릭하면 앵커 요소를 선택.
탭 선택에 따라 탭 내용이 보이도록 하는 UI 구현이나 앵커 클릭시 필요한 메시지 내용을 표시하는데 사용.

#msg{
    display: none;
}
#msg:target {
    display: block;
}

<a href="#msg">클릭</a>
<div id="msg">메시지</div>
#msg:target

 

 

 

  1. CSS 선택자 고급 - 부분 선택자(Partial Selector)로 요소 선택하기

  2. CSS 선택자 고급 - 가상 클래스(Pseudo Class)로 선택하기

  3. CSS 선택자 고급 - 전체 가상 클래스(Pseudo Class) 선택자 요약

  4. CSS 선택자 고급 - 가상 요소(Pseudo Element)로 선택하기

 

반응형

닫기