[CSS] 하위 선택자, 형제 선택자, 자식 선택자

 

1. 하위 선택자

    div blockquoto

 

<div>
  <blockquote> ... </blockquote>
</div>

<div>
  <aside>
    <blockquote> ... </blockquote>
  </aside>
</div>

 

<div> 이고 그아래가 <blockquoto> 태그인 모든 요소들

둘사이에 다른 태그가 있어도 포함된다.

 

 

2. 형제 선택자

 

h1 + h2 {
    color : red;
}

<h1>미국 주식</h1>
<h2>애플</h2>
<h2>테슬라</h2>
<h2>아마존</h2>

애플만 빨간색


h1 ~ h2 {
    color : red;
}

<h1>미국 주식</h1>
<h2>애플</h2>
<h2>테슬라</h2>
<h2>아마존</h2>

<h1> 태그 뒤에있는 모든 <h2> 는 빨간색

 

 

3. 자식 선택자

 

부모요소 > 자식요소  (한단계 아래의 요소만 선택한다.)

 

 

 

 

 참고 : https://dasima.xyz/css-%ED%98%95%EC%A0%9C-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A2%85%EB%A5%98-%EA%B8%B0%ED%98%B8-%EC%A0%95%EB%A6%AC/

참고 : https://urliveblogger.blogspot.com/2021/01/css-selector.html