🎨 CSS | 선택자 간단 정리!

1. 전체 선택자 '*'

• universal selector
• HTML 문서의 head 태그까지 포함한 모든 요소를 선택한다.
• 결합자 * : 별표, 애스터 리스크(Asterisk)

* {
	margin:0;
	padding:0;
}

---

2. 타입 선택자

• type selector, 유형 선택자, 태그 선택자, 요소 선택자
• 특정 태그를 선택한다.

h1 {
	color: #fff;
}
p{
	font-size: 24px;
}

3. 아이디 선택자

• id selector
• #
• 아이디 선택자는 id 자체가 HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어진다.

#header {
	padding: 10px;
}

4. 클래스 선택자

• class selector
• 클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있어 재사용성이 높다.

.fc-red {
	color: red;
}

---

5. 특성 선택자

• []
• 주어진 특성을 가진 모든 요소를 선택한다.

[type="button"]{
	border:0;
	cursor:pointer;
}
[class^="btn"]{
	color:#fff;
	background: royalblue;
}

---

6. 그룹 선택자

• ,

h1, h2, h3, h4, h5, h6{ font-weight:bold;}

---

7. ⭐ 복합 선택자 ⭐

• 자손 선택자( )

  • 자식, 자손 모두를 선택
  • 결합자 (공백, 띄어쓰기)를 통해 구분
    ➡️ 자손 결합자 더 알아보기 ⬅️

    section p{
      font-weight:bold;
    }

• 자식 선택자(>)

  • 직계 자식만 선택

    section > p{
    color:royalblue;
    }

• 일반 형제 선택자(~)

  • 형제를 모두 선택

    h1 ~ p{
    text-decoration:underline;
    }

• 인접 형제 선택자(+)

  • 인접한 형제만 선택

      h1 ~ p{
      text-decoration:underline;
      }