CSS Selector

CSS에서 가장 기본적이면서도 중요한 개념 중 하나가 Selector(선택자) 입니다.
이번 글에서는 CSS Selector가 무엇인지, 전체 CSS 문법에서 어떤 위치를 차지하는지, 그리고 Puppeteer 같은 자동화 환경에서 어떻게 활용되는지까지 정리해보겠습니다.

---

✅ CSS 문법과 Selector의 위치

CSS 문법은 크게 두 가지로 나눌 수 있습니다:

• Selector (선택자): 어떤 HTML 요소를 선택할지 정의
• Declarations (선언): 선택된 요소에 어떤 스타일을 적용할지 정의

즉, CSS 문법 전체 = Selector + Declarations

#box {

color: red;
font-size: 16px;

}

위 코드에서

• #box → Selector
• { color: red; font-size: 16px; } → Declarations

---

✅ 그림으로 이해하는 CSS 문법 구조

• Selector 예시: #box, .red, div, [attr=value]
• Declarations 예시: color: red;, font-size: 16px;

👉 즉, CSS Selector는 HTML 태그/속성을 전부 의미하는 게 아니라, 그중 “요소를 선택하는 규칙”만 담당하는 문법입니다.

---

✅ CSS Selector 종류별 체계

🔹 기본 선택자

• div → 모든 <div> 요소
• .red → class="red" 요소
• #box → id="box" 요소

🔹 그룹 & 전체 선택자

• div, p, span → 여러 요소 동시 선택
• * → 모든 요소 선택

🔹 계층(조합자)

• div p → div 안의 모든 p (후손 선택자)
• div > p → div 바로 아래 자식 p
• div + p → div 바로 뒤 형제 p
• div ~ p → div 뒤에 오는 모든 형제 p

🔹 속성 선택자

• [type="text"] → type="text" 인 요소
• [href^="https"] → href가 https로 시작
• [href$=".pdf"] → href가 .pdf로 끝남
• [data-role*="admin"] → data-role 속성에 "admin" 포함

🔹 가상 클래스 (Pseudo-classes)

• :hover → 마우스 오버
• :first-child → 첫 번째 자식
• :nth-child(2) → 두 번째 자식
• :not(.active) → active 클래스가 아닌 요소

🔹 가상 요소 (Pseudo-elements)

• p::before → <p> 앞에 생성되는 가상 요소
• p::after → <p> 뒤에 생성되는 가상 요소
• p::first-line → <p>의 첫 번째 줄

---

✅ Puppeteer에서 CSS Selector 활용 예시

Puppeteer는 CSS Selector를 그대로 사용할 수 있으며, 몇 가지 확장 문법도 지원합니다.

기본 ID / Class

await page.locator('#submit-button').click();   // id="submit-button"
await page.locator('.username-input').fill('민규'); // class="username-input"

속성 선택자

await page.click('input[type="checkbox"]');
await page.type('input[name="email"]', 'test@example.com');

계층 선택자

await page.click('form > button'); // form 바로 아래 있는 button
await page.click('.menu li:first-child'); // 메뉴의 첫 번째 항목

텍스트 기반 (Puppeteer 확장 문법)

// "로그인" 텍스트 포함된 요소 // 또는 레거시 문법
await page.locator('::-p-text(로그인)').click(); 
await page.locator('text/로그인').click();

Shadow DOM 내부 접근

await page.click('css:shadow=#my-element >>> button'); 
// shadow-root 내부 버튼 클릭

Locator 고급 기능

// 필터링을 통한 정확한 요소 선택
await page.locator('button')
  .filter(button => button.innerText === '확인')
  .click();

// 여러 요소 중 특정 순서 선택
await page.locator('.item').nth(2).click(); // 세 번째 item

// 요소가 나타날 때까지 대기
await page.locator('.loading-spinner').wait();

// ARIA 레이블로 접근성 친화적 선택
await page.locator('::-p-aria(Submit)').click();

💡 loacator 장점

• 요소가 준비될 때까지 자동 대기
• 뷰포트 확인, 활성화 상태 확인 등 자동 검증
• 재시도 메커니즘으로 더 안정적인 테스트 가능

📌 정리

• CSS 문법 전체 = Selector + Declarations
• CSS Selector = HTML 요소를 선택하는 규칙
• Puppeteer는 CSS Selector를 그대로 지원하며, text/, css:shadow 같은 확장 문법도 제공