[CSS] 선택자

 

하위 선택자 

 

지정한 모든 하위 요소에 스타일을 적용합니다. 부모 요소에 포함된 하위 요소 모두에 스타일이 적용됩니다.

 

CSS에서 작성할 때는 부모 요소 하위 요소라는 문법을 사용합니다.

<section class="container">

<header><h1>하위 요소</h1></header>

	<ul> <!--container의 ul자식요소 입니다. -->
		<li>
			<ul>
				<li>contanier의 ul손자요소입니다</li>
			</ul>
		</li>
	</ul>
    
</section>

 html 문서구조에서 container의 모든 ul하위 요소를 선택하고 싶다면 

.container ul{
 
}

이렇게 작성하면됩니다. 속해있는 모든 하위 ul이 선택됩니다.

 

 

자식 선택자

 

만약 손자를 제외하고 자식만 선택하고 싶다면 어떻게 css선택자를 작성해야 할까요?

.container > ul{
}

 

자식 요소에 스타일을 적용하는 선택자로 두 요소 사이에 부등호 >를 표시해 부모 요소와 자식 요소를 구분합니다.

 

인접 형제 선택자(adjacent selecter)

 

인접 형제 선택자는 같은 부모 요소를 가지는 요소들을 형제 관계라 부르며 형제 관계인 요소들에서 먼저 나오는 요소를 형 요소 , 나중에 나오는 요소를 동생 요소라고 합니다.

 

<section class="container">

<header><h1>하위 요소</h1></header>

	<ul> <!--container의 ul자식요소 입니다. -->
		<li>
			<ul>
				<li>contanier의 ul손자요소입니다</li>
			</ul>
		</li>
	</ul>
    
    <ul> <!--container의 ul자식요소 입니다. -->
		<li>
			<ul>
				<li>contanier의 ul손자요소입니다</li>
			</ul>
		</li>
	</ul>
    
</section>

container를 부모로 삼는 요소들을 나열해 본다면 header, 두 개의 ul이 존재합니다.

이중 첫 번째 ul을 찾고 싶을 땐 어떻게 selector를 작성해야 할까요?

 

같은 레벨인 header와 첫 번째 ul이므로

header + ul{
} 

+ 더하기 기호로 표시합니다.

 

요소 1 + 요소 2는 요소 1 이후에 맨 먼저 오는 요소 2에 스타일을 적용합니다.

 

형제 선택자 (sibling selector)

형제 요소들에 스타일을 정의하는데 인 접 형제 선택자와 달리 모든 형제 요소에 적용합니다.

형제 선택자는 ~(틸드) 기호로 표시합니다.

header 다음 오는 동생 요소 ul들을 선택하고 싶다면

header ~ ul{
}

로 작성해 모든 ul동생요소들을 선택할 수 있습니다.