노트속성 선택자와 형제 선택자
Attribute Selectors and Sibling Combinators
프런트엔드#css · 연결된 개념 2개
쉽게 말하면
속성 선택자는 이름표에 '이메일'이라고 적힌 사람처럼 HTML 속성으로 요소를 고르고, 형제 선택자는 내 바로 뒤에 선 사람처럼 줄 선 순서로 골라요. CSS와 querySelectorAll에서 똑같이 써요.
비유가 깨지는 곳 줄서기와 달리 형제 선택자는 뒤쪽만 볼 수 있어요. 브라우저가 문서를 앞에서부터 처리하기 때문이고, 앞쪽이나 부모를 고르려면 :has()를 써요. Tailwind의 peer가 앞 형제만 참조하는 것도 같은 이유예요.
대괄호 []로 HTML 속성을 기준으로 요소를 고르는 선택자와, +·~로 형제 관계를 따라 고르는 선택자. CSS뿐 아니라 querySelectorAll에서도 똑같이 쓴다.
속성 선택자
| 선택자 | 뜻 |
|---|
[id] | id 속성이 있는 요소 |
[type="email"] | 값이 정확히 일치 |
[id^="section"] | 값이 section으로 시작 |
[href$=".pdf"] | 값이 .pdf로 끝남 |
[class*="card"] | 값에 card가 들어 있음 |
h2[id]는 "id가 있는 h2"처럼 태그와 조합한다. 목차를 만들려고 앵커가 달린 제목만 모을 때 document.querySelectorAll('h2[id]')를 쓴다[disabled], [data-state="open"]처럼 상태 속성으로 스타일을 바꾸는 데도 많이 쓴다- 명시도는 클래스와 같다
형제 선택자(Sibling Combinator)
a + b: a 바로 다음에 오는 형제 b 하나(Next-sibling Combinator)a ~ b: a 뒤에 오는 모든 형제 b(Subsequent-sibling Combinator)
둘 다 뒤쪽 형제만 고른다. 브라우저가 문서를 앞에서부터 처리하므로, 앞쪽 요소의 스타일이 뒤에 나올 요소에 따라 바뀌면 매칭을 다시 계산해야 해서 처음에는 이렇게 설계되었다. 지금은 :has()로 "뒤에 무엇이 있는 요소"나 부모를 고를 수 있다(label:has(+ input:invalid)). Tailwind의 peer-* 변형이 앞에 있는 형제(peer)만 참조할 수 있는 것도 ~ 선택자로 만들어지기 때문이다 → Tailwind CSS
참고: MDN — Attribute selectors · MDN — Next-sibling combinator · MDN — Subsequent-sibling combinator
연결된 개념
이 노트를 가리키는 문서
뜻이 가까운 노트
- 쌓임 순서와 z-index
요소가 겹칠 때 무엇이 위에 보일지 정하는 규칙. z-index가 없을 때도 정해진 기본 순서가 있고, z-index는 같은 쌓임 맥락(Stacking Context) 안에서만 비교된다.
- 크로스 브라우징
크로스 브라우징은 브라우저 종류·버전·기기가 달라도 웹 페이지가 같은 기능을 제공하도록 만드는 일이다. 모든 브라우저에서 픽셀까지 똑같이 보이게 하는 것이 목표가 아니라, 지원하기로 한 환경에서 핵심 기능이 동작하고 오래된 환경에서도 쓸 수는 있게(점진적 향상, Progressive Enhancement) 하는 것이 목표다.
- Svelte
컴포넌트를 빌드할 때 DOM(Document Object Model)을 직접 바꾸는 JS(JavaScript)로 컴파일하는 UI 프레임워크. React처럼 런타임에 가상 DOM(Virtual DOM)을 비교하지 않고, 어떤 값이 바뀌면 어떤 DOM을 고칠지 컴파일러가 미리 코드로 만들어 둔다. 앱 프레임워크는 SvelteKit이다.
- CSS-in-JS와 빌드 타임 CSS
JS(JavaScript) 안에서 스타일을 정의하고, 렌더링할 때 라이브러리가 클래스를 만들어 style 태그로 주입하는 방식. styled-components와 Emotion이 대표다. React 18 이후 서버 컴포넌트(React Server Components)·스트리밍 SSR(Streaming Server-Side Rendering)이 자리 잡으면서 런타임에 CSS를 만드는 방식은 줄고, 빌드할 때 CSS를 뽑는 방식이 늘었다(2026 기준).
- 크롬 개발자 도구 팁
크롬 DevTools에서 알아 두면 디버깅 시간이 줄어드는 기능 모음. 대부분 다른 크로미움(Chromium) 브라우저에서도 같다.