[CSS] 부모 자식 셀렉터

 

 

자식 셀렉터

: 부모 자식 관계인 두 셀터를 '>' 기호로 조합한 형태

div > strong {
	color: blue;
}

div > div > strong{
	color: violet;
}

 

자손 셀렉터

: 자손 관계인 2개 이상의 태그를 나열한 형태

ul strong{
	color: blue;
}

※ ul, strong과 다름에 주의하자

 

 

ul strong{
	color: blue;
}
div > strong {
	background: orange;
}

<div>
	<div>Web<strong>Programming</strong></div>
    <ul>
    <li>HTML</li>
    <li><strong>CSS</strong></li>
    </ul>
 </div>

div의 자식 strong의 background: orange로 나타나고, ul의 자손 strong이 color:blue 적용된다.

 

 

 

자식(Child) 필터

 

:nth-child(n)	부모의 n번째 자식 요소를 선택
:nth-child(even)	부모의 짝수 번째 자식 요소 모두 선택
:nth-child(odd)	부모의 홀수 번째 자식 요소 모두 선택
:first-child	부모의 첫번째 자식 요소 선택
:last-child	부모의 마지막 자식 요소 선택
:nth-last-child(n)	부모의 마지막 요소로부터 n번째 자식 요소 선택
:nth-of-type(n)	동일 요소 이름의 형제 중 n번째 요소 선택
:nth-last-of-type(n)	동일 요소 이름의 형제 중 마지막 번째로부터 n번째 요소 선택