CSS 선택자, Selector

선택자(Selectors)

HTML 문서에서 특정한 요소를 선택하여 스타일링 하기 위해서는 반드시 선택자라는 개념이 필요하다.

• 기본 선택자
  • 전체 선택자, 요소 선택자
  • class선택자, id 선택자, 속성 선택자
• 결합자 / 복합 선택자 (Combinators)
  • 자손 결합자, 자식 결합자
  • 일반 형제 결합자, 인접 형제 결합자
• 가상 클래스 / 요소 (pseudo class)
  • 링크, 동적 가상 클래스
  • 구조적 가상 클래스, 기타 가상 클래스, 가상 엘리먼트, 속성 선택자

 

 

• 전체선택자 (Universal Selector)

HTML 페이지 내부의 모든 태그를 선택

<style>
	/* 전체 선택자*/
	* {
    	color:red;
	}
</style>

 

• 요소 선택자 / 태그 선택자 (Type Selector)

HTML 요소를 직접 지칭하는 가장 간단한 선택자

<style>
	/* 요소 선택자*/
	h2 {
     	color:orange;
	}
</style>

 

• 클래스 선택자 (Class Selector)

주어진 값을 class 속성 값으로 가진 HTML 요소를 찾아 선택

<style>
	/* class 선택자*/
	.green {
	 	color:green;
	}
</style>

 

• ID 선택자(ID Selector)

주어진 값을 id속성 값으로 가진 HTML 요소를 찾아 선택

<style>
	/* id 선택자*/
	#purple {
	 	color:purple;
	}
</style>

* 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고,

  단 한번 유일하게 적용될 스타일은 ID 선택자를 사용하는 것이 좋다.

 

• 속성 선택자(Attribute Selector)

속성 선택자는 앞쪽에 태그명과 대괄호[] 사이에 속성에 관련된 내용을 넣어서 선택

/* a태그에 target이라는 속성을 가진 요소를 선택 */
a[target] { color: red; }

/* a태그에 target="_blank"라는 속성을 가진 요소를 선택 */
a[target="_blank"] { color: red; }

 

• 결합자 / 복합 선택자 (Combinators)

두 개 이상의 선택자 요소가 모인 선택자

 

 

• 가상 클래스 선택자 (pseudo-class) / 가상 요소 선택자 (pseudo-element)

가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면,

가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.