CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 방법을 정의한다. 선택자는 HTML 문서 내에서 원하는 요소를 선택하고, 그 요소에 특정 스타일을 적용하기 위해 사용된다. 선택자는 다양한 방식으로 요소를 지정할 수 있으며, 이를 통해 원하는 스타일을 정확하게 적용할 수 있다.
기본 선택자
요소 선택자 (Type Selector)
- 특정 HTML 요소를 선택하여 스타일을 적용한다.
- 예시:
<p>,<h1>,<div>,<a>등
예시
p {
color: blue;
}모든 <p> 요소에 파란색 텍스트 색상을 적용한다.
클래스 선택자 (Class Selector)
class속성값을 기준으로 선택한다. 클래스는 여러 요소에 재사용할 수 있다.- 선택 방법: 클래스 이름 앞에 점(
.)을 사용한다.
예시
.button {
background-color: green;
color: white;
}class="button"을 가진 모든 요소에 스타일을 적용한다.
아이디 선택자 (ID Selector)
id속성값을 기준으로 선택한다. ID는 한 문서 내에서 유일해야 하므로 하나의 요소만 선택된다.- 선택 방법: ID 이름 앞에 샾(
#)을 사용한다.
예시
#header {
background-color: lightgray;
}id="header"를 가진 요소에 스타일을 적용한다.
전체 선택자 (Universal Selector)
- 모든 요소를 선택한다.
- 선택 방법:
*를 사용한다.
예시
* {
margin: 0;
padding: 0;
}모든 요소에 기본 마진과 패딩을 제거한다.
그룹화된 선택자
그룹 선택자 (Group Selector)
- 여러 개의 선택자를 그룹화하여 한 번에 스타일을 적용할 수 있다.
- 선택자 간에 쉼표 (
,)를 사용하여 그룹화한다.
예시
h1, h2, h3 {
font-family: Arial, sans-serif;
}<h1>, <h2>, <h3> 요소에 동일한 스타일을 적용한다.
관계형 선택자 (Combinator Selectors)
자식 선택자 (Child Selector)
- 부모 요소의 직접 자식 요소만 선택한다.
- 선택 방법:
>기호를 사용한다.
예시
div > p {
color: red;
}<div>의 직접 자식인 <p> 요소에 빨간색 텍스트 색상을 적용한다.
후손 선택자 (Descendant Selector)
- 특정 요소의 모든 후손 요소를 선택한다.
- 선택 방법: 공백을 사용한다.
예시
div p {
color: blue;
}<div> 요소 내에 있는 모든 <p> 요소에 파란색 텍스트 색상을 적용한다.
인접 형제 선택자 (Adjacent Sibling Selector)
- 특정 요소 바로 뒤에 오는 형제 요소만 선택한다.
- 선택 방법:
+기호를 사용한다.
예시
h1 + p {
color: green;
}<h1> 바로 뒤에 오는 <p> 요소에 녹색 텍스트 색상을 적용한다.
일반 형제 선택자 (General Sibling Selector)
- 특정 요소 뒤에 있는 모든 형제 요소를 선택한다.
- 선택 방법:
~기호를 사용한다.
예시
h1 ~ p {
color: purple;
}<h1> 뒤에 나오는 모든 <p> 요소에 보라색 텍스트 색상을 적용한다.
속성 선택자 (Attribute Selectors)
속성 존재 선택자 (Attribute Presence Selector)
- 특정 속성이 존재하는 요소를 선택한다.
예시
input[type="text"] {
background-color: yellow;
}type="text" 속성을 가진 모든 <input> 요소에 노란색 배경을 적용한다.
속성 값 선택자 (Attribute Value Selector)
- 특정 속성 값을 가진 요소를 선택한다.
예시
a[href^="https"] {
color: green;
}href 속성이 https로 시작하는 모든 <a> 요소에 초록색 텍스트 색상을 적용한다.
부분 일치 선택자
- 속성 값이 특정 문자열을 포함하는 요소를 선택한다.
예시
a[href*="example"] {
color: red;
}href 속성에 example을 포함한 모든 <a> 요소에 빨간색 텍스트 색상을 적용한다.
의사 클래스 선택자 (Pseudo-class Selectors)
:hover
- 사용자가 요소 위에 마우스를 올렸을 때 스타일을 적용한다.
예시
a:hover {
color: red;
}링크 위에 마우스를 올리면 빨간색으로 변경된다.
:first-child
- 부모 요소 내에서 첫 번째 자식 요소를 선택한다.
예시
ul li:first-child {
font-weight: bold;
}<ul>의 첫 번째 <li> 요소에 굵은 글씨 스타일을 적용한다.
:last-child
- 부모 요소 내에서 마지막 자식 요소를 선택한다.
예시
ul li:last-child {
color: blue;
}<ul>의 마지막 <li> 요소에 파란색 텍스트 색상을 적용한다.
:nth-child()
- 부모 요소 내에서 특정 순서의 자식 요소를 선택한다.
예시
ul li:nth-child(odd) {
background-color: lightgray;
}<ul> 내에서 홀수 번째 <li> 요소에 회색 배경을 적용한다.
의사 요소 선택자 (Pseudo-element Selectors)
::before
- 요소의 내용 앞에 가상 콘텐츠를 삽입한다.
예시
p::before {
content: "Note: ";
font-weight: bold;
}모든 <p> 요소 앞에 "Note: "를 추가한다.
::after
- 요소의 내용 뒤에 가상 콘텐츠를 삽입한다.
예시
p::after {
content: " (End of Paragraph)";
}모든 <p> 요소 뒤에 "(End of Paragraph)"를 추가한다.
결합 선택자
선택자 결합
- 여러 개의 선택자를 조합하여 스타일을 적용할 수 있다. 예를 들어,
.class1 p는.class1클래스가 적용된 요소 내의<p>요소를 선택한다.
예시
.class1 p {
color: red;
}.class1 클래스가 적용된 요소 내에 있는 모든 <p> 요소에 빨간색 텍스트 색상을 적용한다.
:not()
- 특정 선택자를 제외한 요소를 선택한다.
예시
p:not(.highlight) {
color: gray;
}.highlight 클래스가 없는 모든 <p> 요소에 회색 텍스트 색상을 적용한다.
선택자의 우선순위
- 일반적으로
id > class > element순으로 우선순위가 적용된다. - 예시:
#header는.class1보다 더 높은 우선순위를 가진다..class1은div보다 우선순위가 높다.
정리
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 방법을 정의하는 중요한 도구이다. 다양한 선택자를 사용하여 원하는 요소에 정확하게 스타일을 적용할 수 있다. element, class, id 선택자부터 pseudo-class, pseudo-element, attribute 선택자까지 CSS 선택자는 다양한 방식으로 활용 가능하다. 선택자를 잘 활용하면 복잡한 스타일을 보다 쉽게 관리할 수 있다.
