선택자 02 - 자식, 인접형제, 그룹선택자

*자식 선택자

<div>
  <h1 id="title">css 기본 문법</h1>
  <h2>선택자</h2>
  <h2>선택자</h2>
  <nav>
    <h2>제목</h2>
  </nav>
</div>

div의 자식은 3개 h1, h2, nav

div > h2 의 > 는 div의 첫번째 자식들 중 h2들

 

*인접형제 선택자

div h1 + h2{
	color:red;
}


<div>
  첫째 <h1 id="title">css 기본 문법</h1>
  둘째 <h2>선택자</h2> =====> 둘째를 선택 하고 싶을때
  셋째 <h2>선택자</h2>
  넷째 <nav>
          <h2>제목</h2>
  	   </nav>
</div>

div의 둘째인 h2만 바꿀때

div h1 + h2 로 쓴다 + 를 사용

 

가장 아래쪽 자식들만 선택하고 싶은 경우

div nav ~ h2 {
			color:red;
		}


<div>
  <h1 id="title">css 기본 문법</h1>
  <h2>선택자</h2>
  <h2>선택자</h2>
  <nav>
    <h2>제목</h2>
  </nav>
  <h2>타이틀</h2> ======이것과
  <h2>타이틀</h2> ======이것을 바꾸고 싶다.
</div>

nav 아래에 있는 h2들만 선택 하고 싶을때

div nav ~ h2 {} 로 ~ 을 쓴다.

tip: 외우는 법은 div nav 뒤에 있는 자식요소는 ~ 다아아아아아~~~  로 생각한다.

 

*그룹화

#title { text-decoration:underline;}
nav ~ h2 { text-decoration:underline;}


<div>
  <h1 id="title">css 기본 문법</h1>
  <h2>선택자</h2>
  <h2>선택자</h2>
  <nav>
    <h2>제목</h2>
  </nav>
  <h2>타이틀</h2> ======이것과
  <h2>타이틀</h2> ======이것을 바꾸고 싶다.
</div>

#title 과 nav ~ h2 는 나중에도 계속 같이 바뀐다고 가정할때

둘다 css 속성이 같을때 두번 쓸 필요 없이

#title, nav ~ h2 {} 로 한다  , 를 사용함

#title, nav ~ h2 { text-decoration:underline;}