[HTML/CSS] 선택자(Selector) 및 결합자(Combinator) 정리

☐ 선택자(Selector)

전체 선택자
• Page에 있는 모든 Element에 적용됩니다.

* {
  margin: 0;
  padding: 0;
}

타입 선택자
• 선택한 Tag에 스타일을 적용합니다.

h1 {
  color: blue;
  font-family: 'Courier New';'
}

클래스 선택자
• 선택한 Class에 스타일을 적용합니다.

.my-header {
  color: blue;
  font-size: 30px;
}

ID 선택자
• 선택한 ID에 스타일을 적용합니다.

#my-id {
  color: blue;
  font-size: 16px;
}

속성 선택자
• 태그 안에 특정 속성을 가지고 있을 경우 스타일을 적용합니다.
• ex) <a href="https:www.naver.com">이동</a>

a[href] {
  color: red;
}

그룹 선택자
• 나열한 항목에 모두 같은 스타일을 적용합니다.

h1, h2, h3 {
  color: yellow;
}

 

☐ 결합자(Combinator)

자손 결합자
• 하위에 있는 모든 항목에 적용됩니다.

div h1 {
  color: yellow;
}

<div>
  <h1>스타일 적용</h1>
  <span>
    <h1>스타일 적용</h1>
  </span>
</div>

자식 결합자
• 직속 하위에 있는 항목에만 적용됩니다.

div > h1 {
  color: blue;
}

<div>
  <h1>적용됨</h1>
  <span>
    <h1>적용되지 않음</h1>
  </span>
  <h1>적용됨</h1>
</div>

일반 형제 결합자
• 부모를 공유하는 항목에만 적용됩니다.
• ex) div 이후에 등장하고 div와 같은 level에 있는 element에 적용됩니다.

div ~ span {
  color: blue;
}

<h1>적용되지 않음</h1>
<div>
  <h1>적용되지 않음</h1>
</div>
<h1>적용됨</h1>
<span>
  <h1>적용되지 않음</h1>
</span>

인접 형제 개발자
• 나와 같은 부모를 뒀고 내 바로 다음에 등장하는 단 1개의 element에 적용됩니다.

div + h1 {
  color: blue;
}

<h1>적용되지 않음</h1>
<div>
  <h1>적용되지 않음</h1>
</div>
<h1>적용됨</h1>
<h1>적용되지 않음</h1>