- Combination Selector
자손 선택자 (Descendant Selector)
특정 요소 내부에 포함된 모든 해당 요소를 선택합니다. 공백( )으로 구분합니다.
- 설명: 부모 안에 있기만 하면 자식이든, 손자든 상관없이 모두 선택합니다.
- 용도: 특정 구역(예: 메뉴바) 안에 있는 모든 링크 스타일을 바꿀 때 유용합니다.
CSS
/* div 안에 있는 모든 p 태그를 선택 */
div p {
color: blue;
}자식 선택자 (Child Selector)
특정 요소의 직계 자식만 선택합니다. 꺽쇠 기호(>)를 사용합니다.
- 설명: 바로 아래 계층에 있는 요소만 선택하며, 손자나 그 아래 계층은 무시합니다.
- 용도: 구조가 복잡할 때 의도치 않은 하위 요소까지 스타일이 먹히는 것을 방지합니다.
CSS
/* div 바로 아래에 있는 p 태그만 선택 (손자 p는 제외) */
div > p {
border: 1px solid black;
}인접 형제 선택자 (Adjacent Sibling Selector)
특정 요소 바로 다음에 오는 첫 번째 형제만 선택합니다. 더하기 기호(+)를 사용합니다.
- 설명: 같은 부모를 공유하는 형제들 중, 기준 요소 바로 뒤에 딱 하나 붙어 있는 요소만 고릅니다.
- 용도: 제목(h1) 바로 뒤에 오는 첫 번째 문단(p)에만 특별한 여백을 줄 때 자주 씁니다.
CSS
/* h1 바로 뒤에 나오는 p 태그 하나만 선택 */
h1 + p {
font-weight: bold;
}일반 형제 선택자 (General Sibling Selector)
특정 요소 뒤에 오는 모든 형제를 선택합니다. 물결 기호(~)를 사용합니다.
- 설명: 기준 요소보다 뒤에 있기만 하면, 바로 옆이 아니더라도 모든 형제 요소를 선택합니다. (앞에 있는 형제는 선택 안 됨)
- 용도: 특정 요소 이후에 등장하는 모든 콘텐츠의 스타일을 일괄 변경할 때 씁니다.
CSS
/* h1 뒤에 오는 모든 p 태그를 선택 */
h1 ~ p {
color: gray;
}실전 예제 코드: "계층 구조 스타일링"
이 코드를 실행해 보면 각 선택자가 어떻게 범위를 제한하는지 한눈에 알 수 있습니다.
HTML
<style>
/* 1. 자손 선택자: section 안의 모든 span은 노란색 배경 */
section span { background-color: yellow; }
/* 2. 자식 선택자: section 직속 자식인 p만 빨간 글씨 */
section > p { color: red; }
/* 3. 인접 형제 선택자: h2 바로 뒤의 p에 밑줄 */
h2 + p { text-decoration: underline; }
/* 4. 일반 형제 선택자: h2 뒤의 모든 div에 테두리 */
h2 ~ div { border: 1px dashed blue; }
</style>
<section>
<p>나는 자식 p입니다. (빨간색)</p>
<div>
<p>나는 손자 p입니다. (검정색)</p>
<span>나는 손자 span입니다. (노란 배경)</span>
</div>
<h2>소제목</h2>
<p>나는 h2 바로 뒤의 p입니다. (밑줄)</p>
<p>나는 그냥 뒤에 있는 p입니다.</p>
<div>형제 div 1 (파란 테두리)</div>
<div>형제 div 2 (파란 테두리)</div>
</section>연결 선택자 한눈에 요약표
| 선택자 | 기호 | 의미 | 선택 범위 |
| 자손 | (공백) | A 안의 모든 B | 자식, 손자, 증손자 포함 |
| 자식 | > | A 바로 밑의 B | 직계 자식만 |
| 인접 형제 | + | A 바로 뒤의 B | 바로 인접한 형제 1개 |
| 일반 형제 | ~ | A 뒤에 오는 모든 B | 순서상 뒤에 있는 모든 형제 |
학습 정리
- 공백은 깊이 상관없이 '안쪽' 전부, **>**는 딱 '한 단계 밑'만 본다.
- 형제 선택자(+, ~)는 반드시 코드 순서상 뒤에 있는 요소만 선택할 수 있다. (앞의 형제는 선택 불가)
- 선택자를 너무 길게 연결하면(예: div > ul > li > a) 코드가 복잡해지므로 적절한 클래스명과 병행하는 것이 좋다.
- Attribute Selectors
기본 속성 선택자
특정 속성이 있는지, 혹은 속성값이 정확히 일치하는지 확인합니다.
- [속성]: 해당 속성을 가지고 있는 모든 요소를 선택합니다.
- [속성="값"]: 속성값이 지정한 값과 정확히 일치하는 요소를 선택합니다.
CSS
/* title 속성을 가진 모든 요소 */
[title] { border-bottom: 2px dotted orange; }
/* target 속성이 "_blank"인 링크만 선택 */
a[target="_blank"] { color: red; }문자열 매칭 선택자 (패턴 매칭)
속성값의 일부만 일치해도 스타일을 적용할 수 있는 유연한 선택자들입니다.
- [속성^="값"]: 값이 특정 문자로 시작하는 요소를 선택합니다. (Start with)
- [속성$="값"]: 값이 특정 문자로 끝나는 요소를 선택합니다. (End with)
- [속성*="값"]: 값이 특정 문자를 포함하고 있는 요소를 선택합니다. (Contains)
CSS
/* href가 https로 시작하는 링크 (외부 링크) */
a[href^="https"] { font-weight: bold; }
/* href가 .pdf로 끝나는 링크 (파일 다운로드) */
a[href$=".pdf"] { color: green; }
/* class 이름에 'btn'이 포함된 모든 요소 */
[class*="btn"] { padding: 10px; border-radius: 5px; }단어 및 언어 선택자
띄어쓰기로 구분된 단어나 특정 언어 코드를 찾을 때 사용합니다.
- [속성~="값"]: 띄어쓰기로 구분된 여러 값 중 하나가 일치하는 요소를 선택합니다.
- [속성|="값"]: 값이 정확히 일치하거나, 해당 값 뒤에 하이픈(-)으로 연결된 단어로 시작하는 요소를 선택합니다.
CSS
/* class 목록 중 'important'라는 단어가 포함된 요소 */
[class~="important"] { background-color: yellow; }
/* lang 속성이 'ko'이거나 'ko-KR'인 요소 */
[lang|="ko"] { font-style: italic; }실전 예제 코드: "입력창 유형별 스타일링"
폼 태그의 input 요소들은 type 속성에 따라 모양이 천차만별이므로 속성 선택자가 가장 빛을 발하는 구간입니다.
HTML
<style>
/* 모든 input 중 필수 입력(required) 속성이 있는 것 */
input[required] { border: 2px solid red; }
/* type이 "text"인 입력창만 선택 */
input[type="text"] { width: 300px; }
/* type이 "password"인 입력창만 선택 */
input[type="password"] { background-color: #f0f0f0; }
/* name 속성에 'user'가 포함된 모든 요소 */
input[name*="user"] { color: blue; }
</style>
<form>
<input type="text" name="user-id" placeholder="아이디" required>
<input type="password" name="user-pw" placeholder="비밀번호">
<input type="tel" name="phone" placeholder="전화번호">
</form>
속성 선택자 기호 요약표
| 선택자 기호 | 의미 | 활용 예시 |
| [attr] | 속성 존재 여부 | [required] (필수 입력 항목) |
| [attr="val"] | 값이 정확히 일치 | [type="submit"] (제출 버튼) |
| [attr^="val"] | 값의 시작 부분 일치 | [href^="mailto:"] (이메일 링크) |
| [attr$="val"] | 값의 끝 부분 일치 | [src$=".png"] (PNG 이미지) |
| [attr*="val"] | 값의 일부분 포함 | [class*="nav-"] (내비게이션 요소) |
학습 정리
- 속성 선택자는 HTML에 클래스를 일일이 추가하지 않고도 기존 속성만으로 스타일을 제어할 수 있게 해준다.
- 특히 input 태그의 각 타입을 구분하거나, 파일 확장자에 따라 아이콘을 붙일 때 매우 유용하다.
- 대소문자를 구분하지 않고 싶다면 닫는대괄호 앞 i를 붙일 수 있다 (예: [href$=".jpg" i] )