CSS 선택자

상상모음 2025. 3. 17. 17:00

CSS 선택자(CSS Selectors) 완벽 정리!

CSS 선택자는 HTML 요소를 선택해서 스타일을 적용하는 방법! 웹사이트의 디자인을 만들 때, 특정 요소를 꾸미려면 올바른 선택자를 사용

오늘은 기본 선택자부터 고급 선택자까지 하나하나 쉽게 설명!

1. 기본 선택자 (Basic Selectors)

CSS에서 가장 기본이 되는 선택자들

1) 전체 선택자 (Universal Selector) *

모든 요소에 스타일을 적용할 때 사용

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

설명:

위 코드처럼 *을 사용하면 모든 HTML 요소에 기본 여백을 없애는 스타일을 적용할 수 있어!

2) 태그 선택자 (Type Selector)

특정 태그(요소)에 스타일을 적용

p {
  color: blue;
  font-size: 16px;
}

설명:

모든 <p> 태그의 글자 색을 파란색으로, 글자 크기를 16px로 설정!

3) 클래스 선택자 (Class Selector) .

여러 개의 요소에 동일한 스타일을 적용할 때 사용

.button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

설명:

.button 클래스를 가진 모든 요소에 초록색 배경과 흰색 글자 스타일 적용!
여러 요소에서 동일한 스타일을 적용할 수 있어!

<button class="button">클릭하세요</button>
<a href="#" class="button">링크 버튼</a>

버튼과 링크 모두 같은 스타일을 가지게 돼!

4) 아이디 선택자 (ID Selector) #

하나의 특정 요소에 스타일을 적용

#main-title {
  font-size: 24px;
  color: red;
}

설명:

id="main-title"을 가진 요소의 글자 크기를 24px, 색상을 빨간색으로 변경!
같은 ID는 한 번만 사용할 수 있어!

<h1 id="main-title">나만의 제목</h1>

주의:

아이디 선택자는 유일해야 하기 때문에 클래스를 더 많이 사용하는 것이 좋아!

2. 그룹 선택자 (Grouping Selector) ,

여러 요소를 한 번에 선택

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

설명:

h1, h2, h3 태그에 같은 폰트 스타일 적용!
중복 코드 없이 한 번에 스타일 지정 가능!

3. 결합자 (Combinators)

여러 선택자를 조합해서 특정 요소만 선택 가능!

1) 자손 선택자 (Descendant Selector) 공백

특정 요소 안에 있는 모든 하위 요소 선택

div p {
  color: purple;
}

설명:

div 안에 있는 모든 <p> 태그를 보라색으로 변경!

<div>
  <p>이 문장은 보라색!</p>
  <span>
    <p>이것도 보라색!</p>
  </span>
</div>

2) 자식 선택자 (Child Selector) >

직접적인 자식 요소만 선택

div > p {
  color: orange;
}

설명:

div 안에 있는 직접적인 <p> 태그만 주황색으로 변경
중첩된 <p>는 적용 안 됨!

<div>
  <p>이 문장은 주황색!</p>
  <span>
    <p>이건 적용 안 돼!</p>
  </span>
</div>

3) 형제 선택자 (Sibling Selectors)

같은 부모를 가진 요소 중 특정 형제 요소 선택

(1) 인접 형제 선택자 (Adjacent Sibling) +

바로 다음 형제 요소만 선택

h1 + p {
  color: blue;
}

설명:

<h1> 태그 바로 다음 <p> 태그만 파란색으로 변경!

<h1>제목</h1>
<p>이 문장은 파란색!</p>
<p>이건 적용 안 돼!</p>

(2) 일반 형제 선택자 (General Sibling) ~

같은 부모를 가진 모든 형제 요소 선택

h1 ~ p {
  color: green;
}

설명:

<h1> 태그 이후에 있는 모든 <p> 태그를 초록색으로 변경!

<h1>제목</h1>
<p>이 문장은 초록색!</p>
<p>이것도 초록색!</p>

4. 속성 선택자 (Attribute Selectors)

특정 속성을 가진 요소를 선택할 수 있어!

1) 특정 속성을 가진 요소 선택

input[type="text"] {
  border: 2px solid blue;
}

설명:

type="text"인 <input> 요소에 파란색 테두리 적용!

<input type="text" placeholder="이건 적용됨">
<input type="password" placeholder="이건 적용 안 됨">

2) 특정 속성을 포함한 요소 선택

a[href*="google"] {
  color: red;
}

설명:

링크 속성에 "google"이 포함된 모든 <a> 태그를 빨간색으로 변경!

5. 가상 클래스 선택자 (Pseudo-classes)

특정 상태의 요소를 선택하는 특별한 선택자!

1) :hover - 마우스를 올렸을 때

button:hover {
  background-color: yellow;
}

설명:

버튼에 마우스를 올리면 배경색이 노란색으로 변경!

2) :nth-child(n) - 특정 순서의 요소 선택

li:nth-child(2) {
  color: red;
}

설명:

<li> 요소 중 두 번째 요소만 빨간색으로 변경!

6. 가상 요소 선택자 (Pseudo-elements)

특정 요소의 일부에 스타일 적용 가능!

1) ::before - 요소 앞에 내용 추가

p::before {
  content: "👉 ";
}

설명:

<p> 태그 앞에 "👉 " 추가!

2) ::after - 요소 뒤에 내용 추가

p::after {
  content: " ✔";
}

설명:

<p> 태그 뒤에 " ✔" 추가!

정리

선택자	설명
*	모든 요소 선택
p	특정 태그 선택
.class	클래스 선택
#id	아이디 선택
,	여러 요소 선택
>	직접 자식 요소 선택
+	바로 다음 형제 요소 선택
~	모든 형제 요소 선택
[attr]	특정 속성을 가진 요소 선택
:hover	마우스를 올렸을 때
::before	요소 앞에 내용 추가