CSS 선택기는 스타일을 지정하려는 HTML 요소를 선택

CSS 선택자

CSS 선택기는 스타일을 지정하려는 HTML 요소를 "찾거나 선택"하는 데 사용됩니다.

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

• 단순 선택기(이름, ID, 클래스를 기준으로 요소 선택)
• 조합자 선택기 (요소 간의 특정 관계를 기반으로 요소 선택)
• 의사 클래스 선택기 (특정 상태에 따라 요소 선택)
• 의사 요소 선택기 (요소의 일부 선택 및 스타일 지정)
• 속성 선택기 (속성 또는 속성 값을 기반으로 요소 선택)

CSS 요소 선택기

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

 

여기서 페이지의 모든 <p> 요소는 빨간색 텍스트 색상으로 가운데 정렬됩니다. 

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

CSS ID 선택기

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

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

특정 ID를 가진 요소를 선택하려면 해시(#) 문자를 쓰고 그 뒤에 요소의 ID를 입력하세요.

 

아래 CSS 규칙은 id="para1"인 HTML 요소에 적용됩니다. 

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