하위 선택자[CSS]

[광고 누르면 오늘의 행운 상승!!]

 

• 하위 선택자 : 어떤 요소 하위에 있는 특정 자손 요소 선택 시 사용
• 표현 : (부모 요소) (자손 요소)
  - 예 a b{.....} : a요소 하위에 있는 b요소를 선택
  - 예 a b c{.....} : a요소 하위에 있는 b요소 하위에 있는 c요소 선택

article h1{
color : pink;
}
// article 밑의 h1를 모두 핑크로 바꾸겠다.

직계 자손 선택자

• 직계 자손 선택자 : 바로 하위에 있는 요소 선택 시 사용
  - 여러 단계 아래 있는 자손을 모두 선택하는 하위 선택자와는 다름
• 표현 (부모 요소) > (직계 자손 요소)
  - 예) a > b : a 요소 바로 하위(직계 자손 관계)에 있는 모든 b요소 선택

article h1{
color : pink;
}
// article 요소의 직계 자손인 <h1>요소를 핑크색으로 바꾸겠다.

형제 선택자

• 형제 선택자 : 특정 요소 다음에 나오는 형제 관계 요소들 선택
• 표현 : (요소1) ~ (요소1의 형제 요소)

h1~p{
    color : pink;
    }
    <h1> 요소 다음에 나오는 형제 관계의 모든 <p> 요소 핑크색으로 만듬

인접 형제 선택자

• 인접 형제 선택자 : 특정 요소의 바로 다음에 오는 형제 요소를 선택
• 표현 (요소1) + (요소1의 인접형제 요소)

h1+p{
color : pink;
}
<h1> 뒤 인접 형제 요소<p>의 적용

h1+p strong{
color : pink;
}
<h1> 뒤 인접 형제 요소<p>의 하위에 있는 <strong>요소에 적용

전체 선택자

• 전체 선택자 : 모든 요소를 선택하기 위해 사용
• 표현 : * 예) a* : a요소 아래 모든 요소를 선택

section h1~*{
color : pink;
}
<section> 요소 아래의 <h1> 요소와 형제 관계에 있는 모든 요소에 적용