가상 클래스 선택자 xxx-child 주의사항

가상 선택자 사용 시 사용되는 '태그:xxx-child'는 태그이면서 첫번째 자식 또는 후손 요소인 것으로 해석할 수 있다.

 

즉 아래의 예제를 보면

 

.box-group p:first-child

 

'box-group'이라는 클래스 안에 있는 첫번째 태그이면서 p태그인 것

 

*** 만약, 첫번째 자식요소가 p가 아니면 css는 적용되지 않는다.

 

 

 

 

 

예시1) 숫자 1과 3의 색상을 빨간색으로 변경

 

<div class='box-group'>

<div>1</div>

<div>2</div>

<div>3

<p>3-1</p>

<div>3-2</div>

<div>3-3</div>

</div>

 

.box-group :first-child {

color:red;

}

 

*** 'box-group'이라는 클래스의 모든 첫번째 자식요소에 css를 적용한다.

 

 

 

예시2) 숫자 1과 3-1만 색상을 빨간색으로 변경

 

<div class='box-group'>

<div>1</div>

<div>2</div>

<div>3

<div>3-1</div>

<div>3-2</div>

<div>3-3</div>

</div>

 

.box-group div:first-child {

color:red;

}

 

*** 'box-group'이라는 클래스의 첫번째 후손 요소(div)들에게  css를 적용한다.

 

 

 

예시3) 숫자 1만 색상을 빨간색으로 변경

 

<div class='box-group'>

<div>1</div>

<div>2</div>

<div>3

<div>3-1</div>

<div>3-2</div>

<div>3-3</div>

</div>

 

.box-group > div:first-child {

color:red;

}

 

*** 'box-group'이라는 클래스의 첫번째 자식 요소(div)에  css를 적용한다.