구조 가상 클래스 only-child /nth-of-type(n)

0811 복습

 

"구조 가상 클래스"

 

웹문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일 적용할 때 사용

일반적으로 스타일 적용할 때 class id 선택자 사용….

요소가 여러 개 나열되어 있는 경우에는 굳이 class나 id를 쓰지 않고 스타일을 지정(몇 번째인지 구분해서)할 수 있다.

 

only-child : 부모 안에 자식요소가 하나만 존재할때 자식 요소를 선택            
first-child : 부모안에 있는 요소중에서 첫번째 자식을 선택            
last-child : 부모안에 있는 요소중에서 마지막 자식..            
nth-child(n) : 부모안에 있는 모든 요소 중에서  n번째 자식을 선택            
nth-last-child(n) : 부모안에 있는 모든 요소 중에서 끝에서  n번째 자식을 선택            


A:only-target-of : 부모안에 A요소가 하나만 있을때            
A:first-of-type : 부모안에 있는 A요소 중에서 첫번째 요소 선택            
A:last-of-type : 부모안에 있는 A요소 중에서 마지막 요소 선택            
A:nth-of-type(n) : 부모안에 있는 A요소 중에서 n 번째 요소 선택            
A:nth-last-of-type(n) : 부모안에 있는 A요소 중에서 끝에서 n 번째 요소 선택

(선택자 정보 링크)

 

 

 

 

 

 

 

 

 

*