[CSS] 조합 선택자 사용하기

그룹 선택자

여러 선택자를 하나로 그룹 지을 때 사용

선택자와 선택자는 ,로 구분

선택자1, 선택자2, ... , 선택자n{/* CSS 코드 */}

p{
	color:red;
}
#title{
	color:red;
}
.red{
	color:red;
}

/* 그룹화 */

p, #title, .red{
	color:red;
}

---

자식 선택자

부모 요소의 하위에 있는 자식 요소에 스타일을 적용할때 사용
-> 2개의 선택자 사용, > 기호로 구분

부모 선택자 > 자식 선택자{ css 코드 }

.box > p{
	color:red;
}

위 코드의 경우 class 속성값이 box인 요소와 자식 관계인 p태그로 작성된 요소만 선택자로 지정

---

하위 선택자

선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법

2개 이상의 선택자를 사용하며, 선택자와 선택자는 공백으로 구분

선택자1 선택자2 선택자3 ... { css 코드 }

<style>
	div p{
    	color:red;
    }
</style>

<!-- div 태그의 하위에 있는 p 태그에만 적용 -->

<div>
	<p>lorem 1</p>
    <ul>
    	<li>
        <p> lorem 2 </p>
       	</li>
        <li>
        <p> lorem 3 </p>
       	</li>
    </ul>
</div>
<p> lorem 4 </p>

위 경우 lorem1,2,3에 red 적용

---

인접 형제 선택자(+)

지정된 선택자 요소 다음에 있는 형제 관계 요소를 선택자로 지정

2개 이상의 선택자 사용, 선택자와 선택자는 +로 연결

이전 선택자 + 대상 선택자{/* css 코드 */}

<style>
	h1 + h2{
    	color:red;
    }
</style>

<h1>lorem1</h1>
<h2>lorem2</h2>
<h3>lorem3</h3>

lorem2에만 적용됨

만약 h1 이전에 h2 가 적용된 요소가 있다면 이는 적용 대상이 아님

---

일반 형제 선택자(~)

이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정
-> 2개 이상 선택자, ~로 구분

이전 선택자 ~ 대상 선택자{ css code }

<style>
	h1 ~ h2{
    	color:red;
    }
</style>

<h1>lorem1</h1>
<h2>lorem2</h2>
<h3>lorem3</h3>

lorem2,3에 적용