logo

CSS 선택기

CSS 선택기 사용된다 스타일을 지정하려는 콘텐츠를 선택하려면 . 선택기는 CSS 규칙 세트의 일부입니다. CSS 선택자는 ID, 클래스, 유형, 속성 등에 따라 HTML 요소를 선택합니다.

완전한 형태의 IDE

CSS에는 여러 가지 유형의 선택자가 있습니다.

  1. CSS 요소 선택기
  2. CSS ID 선택기
  3. CSS 클래스 선택기
  4. CSS 범용 선택기
  5. CSS 그룹 선택기

1) CSS 요소 선택기

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

 p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p> 
지금 테스트해보세요

산출:

이 스타일은 모든 단락에 적용됩니다.

저도요!

그리고 나!


2) CSS ID 선택기

id 선택자는 HTML 요소의 id 속성을 선택하여 특정 요소를 선택합니다. ID는 페이지 내에서 항상 고유하므로 단일 고유 요소를 선택하도록 선택됩니다.

해시 문자(#)와 요소의 ID로 작성됩니다.

ID가 'para1'인 예를 들어 보겠습니다.

 #para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p> 
지금 테스트해보세요

산출:

안녕하세요 Javatpoint.com

이 단락은 영향을 받지 않습니다.

dhl이 무슨 뜻인가요?

3) CSS 클래스 선택기

클래스 선택기는 특정 클래스 속성을 가진 HTML 요소를 선택합니다. 마침표 문자와 함께 사용됩니다. (마침표 기호) 뒤에 클래스 이름이 옵니다.

참고: 클래스 이름은 숫자로 시작하면 안 됩니다.

'center' 클래스를 예로 들어 보겠습니다.

 .center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p> 
지금 테스트해보세요

산출:

안녕하세요 Javatpoint.com

안녕하세요 Javatpoint.com(더 작은 글꼴)

이것은 단락입니다.