[css] css선택자 (+, ~, >, ' ')

 

* 인접 형제 선택자(Adjacent sibling selector)

' + ' :특정 요소 바로 다음에 위치하는 특정 형제 요소를 대상으로 스타일 적용.

span + span {
  color: red;
}

첫번째 'span' 바로 다음인 두번째 'span' 에만 스타일이 적용됨.

 

<div>
  <span>첫 번째 스팬</span>
  <span>두 번째 스팬</span> <!-- 이 요소에 스타일이 적용 -->
  <span>세 번째 스팬</span> <!-- 이 요소에는 스타일이 적용되지X -->
</div>

 

=> 여러 요소가 연속으로 나열될 때 특정 요소만을 선택할 때 유용.

 

---

 

* 일반 형제 선택자

' ~ ' : 형제요소들 중 지정요소 뒤에 위치하는 모든 형제 요소에 스타일 적용.

p ~ span {
  color: green; /* 모든 <span> 요소에 적용됩니다. */
}

=> '<p>' 태그와 '<span>' 태그는 형제요소(같은 부모)

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span> <!-- 일반 형제 선택자가 적용될 요소 -->
  <span>Span 2</span> <!-- 일반 형제 선택자가 적용될 요소 -->
</div>

=> '<span>' 태그가  '<p>' 태그의 바로 뒤에 위치하지 않아도 적용됨.

 

---

 

* 자식 선택자

' > ' : 지정된 요소의 직접적인 자식 요소들에만 스타일 적용. (중첩요소X)

div > span {
  color: blue; /* 첫 번째 레벨의 <span> 요소에만 적용됩니다. */
}

=>  '<span>' 태그의 바로 상위 요소인 parentElement는 '<div>' 태그가 되고,

       '<div>' 태그의 children 컬렉션에 '<span>' 태그가 포함된다.

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <div>
    <span>Span 2</span> <!-- 이 요소에는 스타일이 적용되지 않습니다. -->
  </div>
</div>

=> 'span1' 은 '<div>' 태그의 직접적인 자식요소,  'span2' 는 '<div>' 태그의 후손 관계.

 

---

 

* 후손 선택자

'  ' (공백) : 부모요소 아래 모든 후손요소에  스타일 적용. 

div span {
  color: purple; /* 모든 후손 <span> 요소에 적용됩니다. */
}

=> '<div>' 태그 내부의 모든 '' 태그에 스타일 적용. (중첩 허용) 

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <div>
    <span>Span 2</span> <!-- 이 요소에도 스타일이 적용됩니다. -->
  </div>
</div>