[국비학원 기록/html5] CSS 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자

가상 클래스 선택자(Pseudo Classes Selectors)

1)hover
 -E:hover
 -E에 마우스(포인터)가 올라가 있는 동안에만 E 선택

2)active
-E:active
-E를 마우스로 클릭하는 동안에만 E 선택

3)focus
-E:focus
 -E가 포커스된 동안에만 E 선택

 

4)first-child
-E:first-child
-E가 형제 요소 중 첫번째 요소라면 선택

5)last-child
-E:last-child
-E가 형제 요소 중 마지막 요소라면 선택

 

6)nth-child(n)
-E:nth-child

-E가 형제 요소 중 n번째 요소라면 선택

7)nth-of-type(n)
-E:nth-of-type(n)
-E의 타입(태그 이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택

8)부정 선택자
-E:not(S)
-S가 아닌 E 선택

 

가상 요소 선택자(Pseudo-Elements Selectors)

 1)before
 -E:before
 -E 요소 내부의 앞에, 내용(content)을 삽입

 2)after
 -E:after
 -E 요소 내부의 뒤에, 내용(content)을 삽입

 

속성 선택자(Attribute Selectors)

 1)[attr]
 -속성 attr을 포함한 요소 선택
 2)[attr=value]
 -속성 attr을 포함하며 속성 값이 value인 요소 선택
 3)[attr^=value]
 -속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택

 

예제

focus 선택자

결과

hover 선택자

결과

first-child 선택자

결과

<p></p> 중 첫번째 요소 선택

결과 : 딸기는 <div>요소이므로 선택되지 않음.

부정 선택자

결과