CSS 선택자(Selectors)

CSS 선택자(selector)

CSS 선택자는 스타일을 지정할 HTML 요소를 "찾기"(또는 선택)하는 데 사용됩니다.

CSS 선택자를 5 가지 범주로 나눌 수 있습니다.

이 페이지에서는 가장 기본적인 CSS 단순 선택자를 설명합니다.

요소 선택기는 요소 이름에 따라 요소를 선택합니다.

페이지의 모든 <p>요소는 다음과 같이 선택할 수 있습니다: (모든 <p> 요소가 빨간색 텍스트로 중앙 정렬된다.)

p {
text-align: center;
color: red;
}

id 선택기는 특정 요소를 찾기 위해 HTML 태그의 id 속성을 사용합니다.

id 는 페이지 내에서 고유해야 하며, 따라서, 하나의 고유한 요소를 찾을 때 id 선택기를 사용한다.

특정 id를 가진 요소에 해당하는 id 선택기는, hash 문자 "#" 다음에 요소의 id 를 적어 작성합니다.

아래의 스타일 규칙은 id= "para1"로 HTML 요소에 적용된다.:

#para1 {
text-align: center;
color: red;
}

	id 이름은 숫자로 시작할 수 없습니다!

클래스 선택기는 특정 클래스를 갖는 요소를 찾습니다.

클래스 선택기는 HTML 클래스 속성을 사용합니다.

특정 클래스에 해당하는 스타일을 작성하려면, 마침표 "." 뒤에 클래스의 이름을 쓴 선택기를 만든다.

아래의 예에서는, class="center" 로 선언된 모든 HTML 요소가 중앙 정렬되게 합니다:

.center {
text-align: center;
color: red;
}

또한, 특정 HTML 요소에서의 클래스만 영향을 받도록 지정할 수 있습니다.

아래의 예에서는, class="center" 로 선언된 모든 p 요소만 중심으로 정렬 될 것입니다:

p.center {
text-align: center;
color: red;
}

	class 이름은 숫자로 시작할 수 없습니다!

스타일 시트에서 같은 스타일 정의를 갖는 요소들이 있다면 :

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

코드를 최소화하기 위해, 선택기들을 그룹 지을 수 있습니다.

선택기들을 그룹 짖기 위해서, 쉼표(comma) "," 로 각 선택기를 구분합니다.

아래의 예제는 위의 코드에서의 선택기들을 그룹화 하였습니다 :

h1, h2, p {
text-align: center;
color: red;
}

Selector	Example	Example description
.class	.intro	Selects all elements with class="intro"
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element,..	div, p	Selects all <div> elements and all <p> elements