선택자 조합

1. 하위 선택자

선택자와 선택자 (공백문자로 구분)

부모 요소에 포함된 모든 자식 요소를 대상으로 스타일을 적용하는 방법

.note p {

color:"orange"

}

2. 자식 선택자

선택자 > 선택자 (왼쪽 부등호로 구분)

부모 요소 바로 뒤의 자식요소 (자식 요소 이하를 포함하지 않는다)를 대상으로 스타일을 적용하는 방법

.swag > p {

border : 1px solid red;

}

3. 인접형제 선택자

선택자 + 선택자 (플러스 기호로 구분)

문서 트리 구조상 동일한 부모 요소를 가진 병렬 관계에 있는 요소 가운데 먼저 등록한 요소를 형 요소, 나중에 등록한 요소를 동생 요소라고 하는데 이때 나중에 등록한 동생요소에 스타일을 적용하는 방법

h1 + h2 {

color : gray ;

backgroundcolor : #ffc;

}

4. 선택자 그룹화 

선택자와 선택자를 콤마(,)롤 구분하여 그룹화 하고 복수의 요소에 같은 스타일을 적용합니다. 

class 선택자나 id 선택자, 속성 선택자, 하위 선택자, 자식 선택자, 인접 선택자 등을 지정할 때도 콤마로 구분하여 그룹화 할 수 있다. 

div > p, #wrap, p.note, blockquote p, h1[title]{

color:red;

}

5. 상속(Inherit)

하위 요소가 상위 요소의 사용값을 물려받느냐 아니냐를 나타내는 것

이러한 값의 상속은 상속되는 것이 있고 안되는 것이 있다. 

값이 자동으로 자식 요소에 상속되지 않는 경우 "inherit" 키워드를 이용하여 강제로 상속시킬 수 있음.

<p> 부모 요소에 적용한 스타일이 자식 요소에 계속되는 것을 

<a herf="inherit.html">

p {

border : 1px solid red;

}

a {

border : inherit;

상속된 스타일을 재정의 하고싶다면 원하는 선택자에 적용을 원하는 스타일을 정의