CSS 셀렉터(선택자)

Ryurbsgks·2021년 10월 24일
0

CSS

목록 보기
4/5
post-thumbnail

셀렉터

셀렉터는 style을 적용하고자 하는 html요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.

셀렉터의 종류

전체 셀렉터

html 문서내의 모든 요소를 선택한다.

*{}

tag 셀렉터

지정된 태그명을 가진 요소를 선택한다.

태그명 {}

id 셀렉터

요소의 id 특성 값을 비교하여 완전히 동일한 id를 가진 요소를 선택한다.

셀렉터(id명) 앞에 #을 붙여야 한다.

#id명 {}

class 셀렉터

요소의 class 특성에 기반해 요소를 선택한다.

셀렉터(class명) 앞에 .을 붙여야 한다.

.class명 {}

어트리뷰트(Attribute) 셀렉터

지정된 어트리뷰트를 갖는 모든 셀렉터에 적용 한다.

셀렉터[어트리뷰트] {}

후손 셀렉터

A셀렉터의 모든 하위 셀렉터중 지정한 B셀렉터에 적용 한다.(먼저 오는 A셀렉터가 상위 셀렉터가 된다)

A셀렉터 B셀렉터 {}

자식 셀렉터

후손 셀렉터와 달리 A셀렉터의 자식 셀렉터에서만 지정한 B셀렉터에 적용 한다.(먼저 오는 A셀렉터가 상위 셀렉터가 된다)

A셀렉터 > B셀렉터 {}

인접형제 셀렉터

같은 부모(같은 계층)를 가질 때 A셀렉터 바로 뒤에 오는 B셀렉터에만 적용 한다.

A셀렉터 + B셀렉터 {}

형제 셀렉터

같은 부모(같은 계층)를 가질 때 A셀럭터 뒤에 오는 모든 B셀렉터에 적용 한다.

A셀렉터 ~ B셀렉터 {}

가상 클래스

요소의 이벤트에 대응하기 위하여 미리 만들어 놓은 클래스가 존재하며 해당 셀렉터에 적용 한다.

종류에는 동적 셀렉터, 링크 셀렉터, 요소 상태 셀렉터, 구조 가상 클래스 셀렉터가 존재한다.

동적 셀렉터

동적 클래스 셀렉터에 오는 종류에는 hover, active, focus가 존재한다.

hover : 마우스가 해당 요쇼 위에 있을 때
active : 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간 까지
focus : 마우스가 해당 요소를 클릭하였을 때

셀렉터:동적클래스셀렉터 {}

링크 셀렉터

링크 클래스 셀렉터에 오는 종류에는 link, visited가 존재한다.

link : 방문하지 않은 링크일 때
visited : 방문한 링크일 때

셀렉터:링크클래스셀렉터 {}

요소 상태 셀렉터

요소 상태 클래스 셀렉터에 오는 종류에는 checked, enabled, disabled가 존재한다.

checked : 셀렉터가 체크된 상태일 때
enabled : 셀렉터가 사용 가능한 상태일 때
disabled : 셀렉터가 사용 불가능한 상태일 때

구조 가상 클래스 셀렉터

구조 가상 클래스란 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 셀렉터이다.

root : 문서 최상위의 요소
nth-child(n) : 상위 요소의 n번째 자식 요소
nth-last-child(n) : 상위 요소의 역순으로 n번째 자식 요소
nth-of-type(n) : 동일한 타입의 형제 요소 중 n번째 요소
nth-last-of-type(n) : 동일한 타입의 형제 요소 중 역순으로 n번째 요소
first-child : 첫 번째 자식 요소
last-child : 마지막 자식 요소
first-of-type : 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소
last-of-type : 형제 요소 그룹 중 해당 유형의 마지막 요소
only-child : 상위 요소에 대해 유일한 자식 요소일 때 선택됨
only-of-type : 상위 요소에 대해 유일한 자식 요소이며 타입이 매치될 때 선택됨
empty : 텍스트를 포함하여 아무런 자식 요소를 가지고 있지 않을 떄 선택됨

부정셀렉터

해당하는 B셀렉터가 포함하지 않는 모든 A셀렉터에 적용 한다.

A셀렉터:not(B셀렉터) {}

정합성 확인 셀렉터

해당하는 셀렉터가 확인 요소의 조건에 맞는지 판별후 셀렉터에 적용 한다.

확인 요소에 오는 종류에는 valid, invalid가 존재한다.

valid : 정합성 검증이 성공한 요소
invalid : 정합성 검증이 실패한 요소

셀렉터:확인요소 {}
profile
코딩도전기

0개의 댓글