Skip to content

CSS:Selectors

CSS 선택자(Selector)에 대한 설명

연속된 클래스가 보일 경우

.a.b는 a클래스와 b클래스가 함께 존재 해야 한다: 

.a.b {
  background-color: gold;
}

.c .d는 c클래스의 하위 요소중 b클래스가 존재 하는 것을 찾는다: 

.c .d {
  background-color: blue;
}

.e, .f는 e클래스 또는 f클래스 이다: 

.e, .f {
  background-color: red;
}

CSS 연결자 (Combinators)

연결자(combinators)는 선택자(selectors)들 사이의 관계를 설명하는 무엇이다.

CSS 선택자는 하나 이상의 단순 셀랙터를 포함 할 수 있다. 단순 셀랙터 사이에, 우리는 연결자(combinator)를 포함 할 수 있습니다.

전체 선택자(Universal Selector)

* 을 사용한다. html 페이지 내부의 전체 태그를 선택한다. CSS LEVEL 은 2 이다. 

* {
  margin: 0;
}

타입 선택자(Type Selector)

태그명을 사용한다. CSS LEVEL 은 2 이다. 

h1 {
  margin: 0;
}

div {
  margin: 1px;
}

속성 선택자(Attribute Selector)

  • [attr] - CSS LEVEL 2 - attr이라는 이름의 특성을 가진 요소를 선택합니다.
  • [attr=value] - CSS LEVEL 2 - attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다.
  • [attr~=value] - CSS LEVEL 2 - attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.
  • [attr|=value] - CSS LEVEL 2 - attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다.
  • [attr^=value] - CSS LEVEL 3 - attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
  • [attr$=value] - CSS LEVEL 3 - attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
  • [attr*=value] - CSS LEVEL 3 - attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.
  • [attr operator value i] - 괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)
  • [attr operator value s] - (Experimental) 괄호를 닫기 전에 s 혹은 S를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)

아이디 선택자(ID Selector)

#으로 시작한다. CSS LEVEL 은 1 이다.

클래스 선택자(Class Selector)

.으로 시작한다. CSS LEVEL 은 1 이다.

자손 선택자(Descendant Selector)

A B (공백) - CSS LEVEL 1

모든 자손들을 선택한다.

Yrkim-140331-selector-descendant.png

자식 선택자(Child Selector)

A>B - CSS LEVEL 2

직계 자손만 선택한다.

Yrkim-140331-selector-child.png

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

A~B - CSS LEVEL 3

A 뒤에 따라오는 모든 B 가 있어야 한다.

Yrkim-140331-selector-general_sibling.png

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

A+B - CSS LEVEL 2

A 바로 뒤에 B 가 있어야 한다.

Yrkim-140331-selector-adjacent_sibling.png

가상 요소(Pseudo-elements)

가상 클래스(Pseudo-class)

다중 클래스/ID 및 클래스 선택기

다음과 같이, a 태그의 button, gold, test 클래스를 선택하고 싶을 경우 

<a href="#" class="button gold test">Test</a>

다음과 같이 .을 연결하여 나열하면 된다. 

a.button.gold.test {
    color: peachpuff;
}

다음과 같이, ID를 기반으로 선택하고 싶다면 

<h1 id="one" class="two">This Should Be Red</h1>

다음과 같이 할 수 있다. 

#one.two { color: red; }

다음과 같이 복합적으로 선택 하는 것도 가능하다. 

.snippet#header.code.red { color: red; }

See also

Favorite site

References

  1. Understanding_CSS_selectors.pdf ↩