[CSS] 셀렉터 2 - 연결 셀렉터

지난 포스트에서 대표적으로 쓰이는 5가지 셀렉터를 알아보았다면 이번 포스트에서는 여러 요소들을 연결해주는 연결 셀렉터에 대해서 알아보겠습니다.

 

1. 하위 셀렉터 (자손 셀렉터, Descendant Selector)

처음 배울때는 자손 셀렉터로 배웠었는데, 인터넷을 찾아보니 하위 셀렉터라는 이름을 가지는 것이 더 좋다고 판단되어서 하위 셀렉터로 기술하겠습니다. (양질의 검색결과 + 후에 나올 자식 셀렉터와의 혼용 방지)

 

하위 셀렉터는 상위 요소의 스타일이 하위 요소에 모두 적용되는 셀렉터입니다. 상위 요소를 먼저써주고 하위 요소를 써주는데 이 둘은 공백으로 구분합니다.

하위 셀렉터는 상위 요소내에 포함된 특정 하위 요소들에 전부 스타일이 적용되며, 이는 하위의 하위 즉 자손 요소 까지도 적용이 됩니다.

아래 예제는 <div>의 하위 요소로 오는 <p>태그에만 css 효과를 주는 예제입니다.

상위요소 하위요소 { 속성: 속성 값; }

 

하위 셀렉터

 

2. 자식 셀렉터 (Child Selector)

자식 셀렉터는 마찬가지로 상위 요소아래의 하위 요소에 스타일을 적용할 때 사용합니다. 그러나 위에서 본 자손 셀렉터와는 다르게 자손 요소 까지 적용되지 않고 자식 요소에만 스타일이 적용됩니다.

자식 셀렉터는 상위 요소를 먼저쓰고 하위 요소를 써주는데 두 요소를 '>' 오른쪽 꺾쇠로 구분합니다.

아래 예제는 마찬가지로 <div>의 하위 요소로 오는 <p>에만 스타일이 적용됨을 보여줍니다.

상위요소 > 하위요소 { 속성: 속성 값; }

 

자식 셀렉터

보시다시피 하위 셀렉터에서는 <div>아래 어디에든지 <p>가 존재한다면 스타일을 적용했었는데 자식 셀렉터에서는 바로 아래의 <p>요소에만 스타일이 적용되었음을 보여줍니다.

 

 

3. 형제 셀렉터

형제 셀렉터는 모든 형제 요소에 스타일을 적용합니다.

 

형제 요소란, 태그의 포함관계에서 같은 부모 요소를 가지고 있는 요소들을 형제 요소라고 하며, 먼저나온 요소가

'형 요소' 나중에 나오는 요소가 '동생 요소'입니다.

 

형제 셀렉터는 두 요소사이에 '~'표시를 통해 선언합니다. 이는 형제 요소1의 뒤에 나오는 모든 형제 요소2에 스타일을 적용하겠다는 의미입니다.아래 예제는 <h2>다음에 나오는 <ul>형제에 스타일을 적용하는 예제입니다.

형제 요소1 ~ 형제 요소2 { 속성: 속성 값; }

 

형제 셀렉터

<h2>의 형제에는 <ul>, <ol>이 있지만 셀렉터가 <ul>만 지정해주었으므로 <ul>요소에만 효과가 적용되었음을 알 수 있습니다.

 

 

4. 인접 형제 셀렉터

인접 형제 셀렉터는 마찬가지로 형제 요소에 스타일을 적용할 때 사용합니다. 하지만 인접 형제 셀렉터는 형제 요소1 바로 뒤에 나오는 형제 요소2에만 스타일을 적용한다는 차이점을 가지고 있습니다. 인접 형제 셀렉터는 '+'로 정의합니다.

아래 예제에서는 <h2>의 인접 형제인 <ul>에 스타일 적용하는 예제입니다.

형제 요소1 + 형제 요소 2 { 속성: 속성 값; }

 

인접 형제 셀렉터

형제 셀렉터와 달리 모든 <ul>요소에 스타일이 적용되지 않고 바로 뒤에오는 <ul>요소에만 스타일이 적용되었다는 점을 볼 수 있습니다.