[J의 웹개발공부] CSS 선택자 결합 방법

CSS 선택자 결합

 

1. 후손 선택자(공백): 특정 요소의 모든 후손 요소를 선택합니다.

 

div 안에 있는 모든 p 요소를 선택합니다

 

 

2. 자식 선택자(> 기호): 특정 요소의 직계 자식 요소만 선택합니다.

 

div의 직계 자식 p 요소만 선택합니다.

 

 

3. 형제 선택자(~, + 기호):

• 일반 형제 선택자(~): 특정 요소 이후의 모든 형제 요소를 선택합니다.

 

 

h1 이후의 모든 p 요소를 선택합니다.

• 인접 형제 선택자(+): 특정 요소 바로 다음에 오는 형제 요소를 선택합니다.h1 바로 다음에 오는 p 요소를 선택합니다.

h1 바로 다음에 오는 p 요소를 선택합니다.

 

4. 그룹 선택자(쉼표): 여러 요소를 한꺼번에 선택합니다.h1, h2, h3 요소를 모두 선택합니다.

h1, h2, h3 요소를 모두 선택합니다.

 

 

5. 속성 선택자: 특정 속성을 가진 요소를 선택합니다.href 속성이 있는 모든 a 요소를 선택합니다

 

 

href 속성이 있는 모든 a 요소를 선택합니다.

 

6. CSS 선택자 체이닝(Chaining)
CSS 선택자 체이닝은 여러 선택자를 함께 사용하여 특정 요소를 더 구체적으로 선택하는 방법입니다. 이는 보다 정밀한 스타일링을 가능하게 합니다.

예시

1. 클래스 및 ID 체이닝:.class1 클래스를 가지며 id가 id1인 요소를 선택합니다
   
   .class1#id1 { color: blue; }
   
   
2. 요소와 클래스 체이닝:div 요소 중에서 class2 클래스를 가진 요소를 선택합니다.
   
   div.class2 { color: red; }
   
   
3. 요소와 속성 체이닝:input 요소 중에서 type 속성이 text인 요소를 선택합니다.
   
   input[type="text"] { border: 1px solid black; }
   
   
4. 여러 클래스 체이닝:class1과 class2 클래스를 모두 가진 요소를 선택합니다.
   
   .class1.class2 { background-color: yellow; }

예시와 설명

1. 복합 선택자 체이닝:class1 클래스를 가진 div 내부의 class2 클래스를 가진 span 요소를 선택합니다.
   
   div.class1 span.class2 { font-size: 16px; }
   
   
   
2. 자식 선택자와 클래스 체이닝:ul 요소의 직계 자식 중 class3 클래스를 가진 li 요소를 선택합니다.
   
   ul > li.class3 { list-style: none; }

 

 

이와 같이 다양한 선택자를 결합하여 원하는 요소를 효과적으로 스타일링할 수 있습니다.