CSS Type 선택자

CSS 선택하기

요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다.

 

CSS 엘리먼트 선택

요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다.

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

 

CSS id 선택기

id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다.

요소의 id는 페이지 내에서 고유하므로 id 선택기는 하나의 고유 한 요소를 선택하는 데 사용됩니다!

특정 ID를 가진 요소를 선택하려면 해시 (#) 문자와 요소의 ID를 차례로 쓰십시오.

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

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

 

CSS 클래스 선택기

클래스 선택기는 특정 클래스 속성을 가진 HTML 요소를 선택합니다.

특정 클래스를 가진 요소를 선택하려면 마침표 (.) 문자와 클래스 이름을 차례로 쓰십시오.

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

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

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

HTML 요소는 둘 이상의 클래스를 참조 할 수도 있습니다.

<p class="center large">This paragraph refers to two classes.</p>

클래스 이름은 숫자로 시작할 수 없습니다!

 

CSS 전체 선택기

전체 선택기는 페이지의 모든 요소를 가리키는 선택자로 '*'로 표시합니다.

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

 

CSS 하위 선택기

하위 선택기는 요소 내부에 있는 모든 해당 요소를 가르키며, 선택자 사이를 공백으로 분리합니다.

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

 

CSS 자식 선택기

자식 선택기는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를 '>'으로 분리합니다.

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

 

CSS 인접 선택기

인접 선택기는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 '+'로 분리합니다.

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

 

CSS 그룹화 선택기

그룹화 선택기는 동일한 스타일 정의를 가진 모든 HTML 요소를 선택합니다.

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

 

모든 CSS 단순 선택기

.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

 

https://www.w3schools.com/css/css_selectors.asp

CSS Selectors