CSS의 너무나도 많은 선택자(Selector)들 중에서 자주 사용되는 선택자들을 정리해보자.

Basic Seletors

전체 선택자(Universal Selector)

* { property: value }

• HTML 문서내의 모든 element들을 선택한다.

태그 선택자(Type Selector)

 tagName { property: value }

• 지정된 태그명을 가지는 element들을 선택한다.

ID 선택자(ID Selector)

#idName { property: value }

• 지정된 id를 가지는 element를 선택한다.
• id는 중복이 불가한 유일한 값이다.

클래스 선택자(Class Selector)

.className { property: value }

• 지정된 class를 가지는 모든 element들을 선택한다.
• class는 중복이 가능한 값이다.

속성 선택자(Attribute Selector)

/** 1. selector[attribute] 
 *  a 요소 중 href 속성을 갖는 모든 요소
 */
 a[href] { property: value }

/** 2. selector[attribute="value"] 
 *  a 요소 중 target 속성이 "_blank"인 모든 요소
 */
 a[target="_blank"] { property: value }

/** 3. selector[attribute~="value"] 
 *  h1 요소 중 title 속성에 one(공백으로 구분된)을 포함하는 요소
 */
 h1[title~="one"] { property: value }

/** 4. selector[attribute^="value"] 
*  a 요소 중 href 속성의 값이 http://로 시작하는 모든 요소
*/
a[href^="http://"] { property: value }

/** 5. selector[attribute$="value"] 
*  a 요소 중 href 속성의 값이 abc.html로 끝나는 모든 요소
*/
a[href$="abc.html"] { property: value }

/** 6. selector[attribute*="value"] 
 *  h1 요소 중 title 속성에 one(공백으로 구분하지 않은)을 포함하는 요소
 */
 h1[title*="one"] { property: value }

여기부터 A와 B는 선택자(Selector)라고 가정한다.

Grouping Seletors

A, B ...{ property: value }

• , 로 구분한 모든 Selector들을 선택한다.

Combinators

자손 선택자(Descendant Combinator)

/** 
 *  supA subB { property: value }
 */
div a { property: value }

• div 요소의 전체 하위레벨의 요소들 중 a요소를 모두 선택한다.

자식 선택자(Child Combinator)

/** 
 *  supA > subB { property: value }
 */
div > a { property: value }

• div 요소의 한 단계 하위레벨의 요소들 중에서 a 요소를 모두 선택한다.

자손과 자식 선택자가 헷갈리 수 있는데 자손은 모든 하위레벨의 요소들 중에서 선택하는데 반해 자식은 무조건 한단계 아래의 요소들 중에 선택한다는 것이 차이점이다.

인접 형제 선택자(Adjacent Sibling Combinator)

/** 
 *  A + B { property: value }
 */
div + a { property: value }

• div 요소와 동일한 레벨에 있는 요소중에 바로 뒤에 있는 요소 한개를 선택한다. div와 a요소 사이에 다른 요소가 있으면 선택되지 않는다.

일반 형제 선택자(General Sibling Combinator)

/* 
 * A ~ B { property: value }
 */
div ~ a { property: value }

• <div>와 같은 레벨에 있는 요소들 중에서 <a>를 모두 선택한다.

Pseudo-Class

Pseudo-Class Selector는 실제로 클래스가 존재하지 않지만 특정 조건에 따라 임의로 적용되는 가상의 클래스를 선택한다.

A:Pseudo-class { property: value }

링크 선택자(Link pseudo-classes)

• A:link - A가 아직 방문하지 않은 링크일 때
• A:visited - A가 방문한 링크일 때

동적 선택자(User action pseudo-classes)

• A:hover - A에 커서가 올라와 있을 때
• A:active- A를 클릭한 상태일 때
• A:focus - A에 포커스된 상태일 때

구조 가상 클랙스 선택자(Structural pseudo-classes)

• A:first-child - 모든 A 중에서 첫 번째 자식인 요소를 선택
• A:last-child - 모든 A 중에서 마지막 번째 자식인 요소를 선택
• A:nth-child(n) - 모든 A 요소 앞에서 n번째 요소들을 선택(ex.2n+1)
• A:nth-last-child(n) - 모든 A 요소 뒤에서 n번째 요소들을 선택(ex.2n+1)

가상 요소 선택자(Pseudo-Element-Selector)

Pseudo-Element Selector는 가상 클래스의 세부 요소들을 선택한다.

A::Pseudo-element { property: value; }

• ::first-letter - content의 첫 글자 선택
• ::first-line - content의 첫 줄 선택(block 요소에만 가능)
• ::after - 해당 content의 뒤에 위치한 공간을 선택
• ::before - 해당 content의 앞에 위치한 공간을 선택
• ::selection - 드래그한 content를 선택

더 많은 선택자들을 자세히 알고 싶다면 여기에서 확인하도록 하자.