CSS 선택자

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

선택자는 CSS 규칙조합이 어떤 요소들에 적용될지 정의한다.

기본 선택자

형식 선택자
이 선택자는 주어진 이름  과 일치하는 모든 요소를 선택한다.
문법: 요소명
예: input 은 모든 <input> 요소를 선택한다.
클래스 선택자
이 선택자는 class 속성의 값을 사용하여 요소를 선택한다.
문법: .클래스명
예: .index 는 클래스명이 index인 모든 요소를 선택한다. (class="index" 속성 선택자를 사용한것과 동일하다).
ID 선택자
이 선택자는 id 속성값을 사용하여 노드를 선택한다. 문서내에서 주어진 ID를 갖는 요소는 유일해야 한다.
문법: #id명
예: #toc 는 id가 toc인 요소를 선택한다. (id="toc" 속성 선택자를 사용한것과 동일하다).
통괄 선택자
이 선택자는 모든 노드들을 선택한다. 이 선택자는 하나의 네임스페이에 있고 모든 네임스페이스에도 변형된 형태가 있다.
문법: * ns|* *|*
예: * 은 문서내 모든 요소를 선택한다.
속성 선택자
이 선택자는 속성 중 한개의 값을 사용하여 선택한다.
문법: [속성] [속성=값] [속성~=값] [속성|=값] [속성^=값] [속성$=값] [속성*=값]
예: [autoplay] 는 autoplay 속성을 갖는 모든 요소를 선택한다. 속성에 어떤 값이 있어도 관계없이 일치한다.


근접 형제노드 선택자
'+' 결합자는 지정된 요소 이전요소 바로 뒤따르는 노드들을 선택한다.
문법: A + B
예: ul + li 는 <ul> 바로 뒤에 오는 모든 <li> 요소들을 선택한다.
일반 형제노드 선택자
~' 결합자는 지정된 요소  selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p> element inside the same element.
Child selectors
The '>' combinator selects nodes that are direct children of the former specified element.
Syntax: A > B
Example: ul > li will match all <li> elements that are inside a <ul> element.
Descendant selectors
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
Syntax: A B
Example: div span will match any <span> element that is inside a <div> element.


Pseudo-elements are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.


Pseudo-classes allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.


Specification Status Comment
Selectors Level 4 Working Draft  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 (1.9.2) ? ? 3.2

문서 태그 및 공헌자

 이 페이지의 공헌자: ibizcox
 최종 변경: ibizcox,