CSS 선택자

This translation is incomplete. Please help translate this article from English

선택자는 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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