[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)

- 2021.08.26 -

- 2023.05.05 -

---

기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다

---

CSS 셀렉터

내부/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법

 

- tag 선택자 : html 문서의 모든 특정 태그를 선택할 때 사용

html 태그의 이름으로 바로 선택할 수 있다.

어떠한 기로호 붙이지 않고 태그 이름을 사용할 수 있다.

 

- id 선택자 : html 문서의 하나의 요소를 특정해서 선택할 때 사용

html태그의 속성으로 id를 지정/선언 할 수 있습니다.

하나의 id는 문서 내 하나만 존재 해야한다.

#기호로 표현한다.

html <p id="description-text-1"></p> 에서 css #description-text-1{ css 속성 선언 } 으로 표현

 

- class 선택자 : html 문서의 여러 요소를 그룹으로 선택할 때 사용

id가 주민번호같은 역할을 한다면 class는 분류를 위한 역할을 한다.

하나의 class는 문서 내 여러 개에 지정할 수 있다.

.(점) 기호로 표현한다.

<p class="description-text"></p> 이 .description-text{ css 속성 선언}으로  하나의 class를 조정할 수 있다.

 

조합 선택자

특정 요소 하위에 있는 요소를 선택한다.

- 자식 조합 선택자 : > 기호 사용

'자식'은 대표 요소의 바로 직계를 자식 이라고 함

 

- 자손 조합 선택자 : 띄어쓰기 사용

'자손'은 대표 요소의 자식의 모든 자식을 자손이라고 함

 

상태 선택자

: (콜론) 기호를 사용함.

요소가 특정 상태가 되었을 때만 선택됨.

- 반응 선택자 : hover(마우스 커서가 위헤),active(활성화된),visitied(방문한 링크) 등

- 상태 선택자 : focus(입력, 버튼에 포커스), enabled(사용가능한), disable(사용불가능한) 등

 

특성 선택자

요소에 부여된 특성의 존재 여부나 그 값에 따라 선택.

대괄호를 사용해서 특성을 지정함

- a[href] : href 속성이 지정된 요소

- form과 관련된 태그와도 많이 사용됨

 

 

---

마  치  며

아 머리아프다!