[CSS] CSS 선택자의 정의와 종류

CSS 선택자

선택자를 통하여 요소를 선택하고 속성을 줄 수 있습니다.

• id 선택자
• 하나의 태그만 식별하기 위한 선택자입니다.
• 하나의 태그에 하나만 사용할 수 있습니다.
• "#"으로 표시합니다.
• class 선택자
  • 여러개의 태그를 식별하기 위한 선태자입니다.
  • 하나의 태그에 여러개를 사용할 수 있습니다.
  • "."으로 표시합니다.

속성 선택자

[ ] 괄호안의 속성 이름과 값 사이에 다양한 연산자를 사용하여 속성값의 일부만 평가하여 조건에 맞는 엘리먼트를 선택한다.

선택자설명

A[속성^=값]	특정 값으로 시작한다.
A[속성$^=값]	특정 값으로 끝난다.
A[속성*=값]	특정값을 부분 문자열로 포함한다.
A[속성~=값]	특정 값을 단어로 포함한다.
A[속성|=값]	특정 값을 단어로 포함한다. ~=에 비해서는 하이픈을 단어 구분자로 인정한다는 점이 다르다.

상태 선택자

마우스 위치와 클릭 여부에 따라 상태 선택자를 선택한다.

선택자설명

:hover	마우스가 위에 있을 때 선택된다.
:active	마우스 버튼을 클릭할 때 선택된다.

링크 선택자

<a> 태그의 링크는 일반 엘리먼트에 비해 방문 여부라는 추가 상태를 가진다.

선택자설명

a:link	링크의 속성이다.
a:visited	이미 방문한 링크에 대한 속성이다.

입력폼 선택자

포커스 여부나 사용 가능성, 체크 여부 등의 컨트롤 상태에 따라 엘리먼트를 선택합니다.

선택자설명

:focus	포커스를 가진 상태이다.
:enabled	사용 가능한 상태이다.
:disabled	사용 금지된 상태이다.
:checked	체크된 상태이다.
:default	디폴트값을 가진 상태이다.
:valid	입력값이 유효한 상태이다.
:invalid	입력값이 무효한 상태이다.
:in-range	입력값이 지정된 범위 안에 있다.
:out-of-range	입력값이 지정된 범위 안에 있지 않다.
:required	필수 속성이다.
:optional	옵션 속성이다.