BACKEND [Kamranahmedse Roadmap]/CSS

[CSS] CSS 선택자(Selector) 정리

Alex Han 2025. 2. 1. 19:10
반응형

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용할 수 있도록 도와준다.

선택자는 단순한 태그 선택부터 복잡한 관계 설정까지 가능하며, 우선순위에 따라 스타일이 결정된다.

 

 

1. 기본 선택자 (Simple Selectors)

 

🔹 1) 전체 선택자 (*)

• 문서 내 모든 요소를 선택한다.

* {
    margin: 0;
    padding: 0;
}

 

🔹 2) 태그(요소) 선택자 (tagname)

• 특정 태그의 모든 요소를 선택한다.

p {
    color: blue;
}

 

✅ 모든 <p> 태그의 텍스트를 파란색으로 변경.

 

🔹 3) 클래스 선택자 (.classname)

• 특정 클래스명을 가진 요소를 선택한다.

.red-text {
    color: red;
}
<p class="red-text">이 문장은 빨간색입니다.</p>

 

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

 

🔹 4) ID 선택자 (#idname)

• 특정 id를 가진 유일한 요소를 선택한다.

#main-title {
    font-size: 24px;
}
<h1 id="main-title">제목입니다.</h1>

 

✅ ID는 한 문서에서 유일해야 하며, 동일한 ID를 여러 요소에 사용하면 CSS 적용이 불안정해질 수 있다.

 

🔹 5) 그룹 선택자 (A, B, C)

• 여러 요소에 같은 스타일을 적용할 때 사용한다.

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

 

✅ <h1>, <h2>, <p> 모두 같은 글꼴 적용.

 

 

2. 결합자(Combinators) - 요소 간 관계 선택

 

🔹 1) 자손(하위) 선택자 (A B)

• A 요소 내부에 있는 모든 B 요소를 선택한다. (직계 자식뿐만 아니라 깊은 요소까지 포함)

div p {
    color: green;
}

 

✅ <div> 내부 모든 <p> 태그에 적용.

 

🔹 2) 자식 선택자 (A > B)

• A 요소의 직계 자식인 B 요소만 선택.

div > p {
    font-weight: bold;
}

 

✅ <div> 내부에 직접 포함된 <p> 태그만 적용됨.

 

🔹 3) 형제 선택자

• 특정 요소 뒤에 오는 형제 요소를 선택할 때 사용.

 

(1) 인접 형제 선택자 (A + B)

• A 바로 뒤에 오는 첫 번째 B 요소를 선택.

h1 + p {
    color: red;
}

 

✅ <h1> 바로 다음 <p> 태그만 적용.

 

(2) 일반 형제 선택자 (A ~ B)

• A 다음에 나오는 모든 B 요소를 선택.

h1 ~ p {
    color: gray;
}

 

✅ <h1> 이후 등장하는 모든 <p> 태그 적용.

 

 

3. 속성 선택자 (Attribute Selectors)

HTML 요소의 속성값을 기반으로 선택하는 방식.

 

🔹 1) 특정 속성이 있는 요소 ([attr])

input[required] {
    border: 2px solid red;
}

 

✅ required 속성이 있는 <input> 요소만 빨간 테두리 적용.

 

🔹 2) 특정 값과 일치 ([attr="value"])

input[type="password"] {
    background-color: yellow;
}

 

✅ type="password"인 <input> 요소에 노란 배경 적용.

 

🔹 3) 특정 값으로 시작 ([attr^="value"])

a[href^="https://"] {
    color: green;
}

 

✅ href 속성이 https://로 시작하는 <a> 요소를 초록색으로 변경.

 

🔹 4) 특정 값으로 끝 ([attr$="value"])

img[src$=".png"] {
    border-radius: 10px;
}

 

✅ .png 확장자로 끝나는 <img> 요소에 둥근 테두리 적용.

 

🔹 5) 특정 값을 포함 ([attr*="value"])

div[class*="box"] {
    padding: 10px;
}

 

✅ class 속성에 "box"가 포함된 모든 <div> 요소에 padding 적용.

 

 

4. 가상 클래스(Pseudo-classes)

특정 상태에 있을 때 적용되는 선택자.

 

🔹 1) 동적 상태 선택자

a:hover { color: red; }   /* 마우스 올렸을 때 */
input:focus { border: blue; }  /* 포커스 됐을 때 */
button:active { background: gray; }  /* 클릭했을 때 */

 

🔹 2) 위치 기반 선택자

li:first-child { font-weight: bold; }  /* 첫 번째 자식 */
li:last-child { font-style: italic; }  /* 마지막 자식 */
li:nth-child(2) { color: red; }  /* 두 번째 자식 */
li:nth-child(odd) { background: lightgray; }  /* 홀수 번째 */
li:nth-child(even) { background: lightblue; }  /* 짝수 번째 */

 

✅ <li> 태그의 첫 번째, 마지막, 특정 순번에 스타일 적용.

 

 

5. 가상 요소(Pseudo-elements)

특정 요소의 일부만 선택할 때 사용.

 

🔹 1) ::before, ::after

요소의 앞/뒤에 가상 콘텐츠를 삽입할 때 사용.

h1::before {
    content: "🔥 ";
}
h1::after {
    content: " 🎉";
}

 

✅ <h1> 앞에 🔥, 뒤에 🎉 추가.

 

🔹 2) ::first-letter, ::first-line

p::first-letter {
    font-size: 2em;
    color: red;
}
p::first-line {
    font-weight: bold;
}

 

✅ 첫 글자 크기 키우기, 첫 줄만 볼드체 적용.

 

 

6. 선택자 우선순위 정리

 

CSS 스타일이 겹칠 경우 우선순위가 적용됨.

 

(높음 → 낮음)

1. !important

2. Inline 스타일 (style="color: red;")

3. ID 선택자 (#idname)

4. 클래스 / 속성 선택자 (.class, [attr])

5. 태그 선택자 (p, h1)

6. 전체 선택자 (*)

 

✅ 같은 수준이면 나중에 선언된 스타일이 적용됨.

 

 

📌 정리

선택자 설명
* 전체 선택자
tagname 태그 선택자
.class 클래스 선택자
#id id 선택자
A B 자손 선택자
A > B 자식 선택자
A + B 인접 형제 선택자
A ~ B 일반 형제 선택자
[attr] 속성 선택자
:hover, :focus 가상 클래스
::before, ::after 가상 요소

 

➡ 선택자를 조합하면 더욱 강력한 스타일링이 가능하다.

반응형