13. CCS 선택자
🐣 선택자
-
selector: 스타일을 적용할 대상 선택
✅ 전체 선택자: *{} ✅ HTML 요소 선택자: h1{}
✅ 아이디 선택자: $test1 ✅ 클래스 선택자: .test2
✅ 그룹 선택자: $test1, .test2, h1{} -
결합 선택자
✅ 자손 선택자(descendant slector): 하위요소 중 특정 타입 요소, 뛰어쓰기 구분
div p{스타일;}
✅ 자식 선택자(child slector): 바로 밑 하위요소
div > p{스타일;} -
동위 선택자
✅ 일반 동위 선택자(general sibling slector): 해당 요소보다 뒤에 존재하는 특정 동위요소, 본인포함x
div ~ p{스타일;}
✅ 인접 동위 선택자(adjacent sibling slector): 해당 요소보다 바로 뒤에 특정 동위요소
div + p{스타일;} -
우선순위: 아랫쪽>위쪽 선언
➊ !important - 모든 선언 무시하고 가장 우선 점수 무한대
➋ inline 선언방식 - style 속 사용 점수 1000
➌ 아이디 선택자 - 점수 100
➍ 클래스 선택자 - 점수 10
✔️ :hover 등의 상태 가상 클래스 포함
➎ 요소명 선택자 - 점수 1
✔️ ::before등의 가상 요소 포함
➏ 전체 선택자 - 점수 없음
➐ 상속된 선택자 - 점수 계산x//110아이디100+클래스10
#testA .test1{}
// 111요소명1+아이디100+클래스10
div#testB.tst2{}
// 31_1+10+10+10
div.tst1.tes2.tes3{}
// 211_100+10+100+1
#sec1.inner #test3 li{}
🐥 의사 클래스
-
동적 의사 클래스(dynamic pseudo-classes)
✅ :link - (기본)연결된 페이지를 방문하지 않은 상태
✅ :visited - 한 번이상 링크를 통해 페이지를 방문한 상태
✅ :hover - 마우스 커서 링크 위에 올라가있는 상태
✅ :active - 마우스로 링크를 클릭하고 있는 상태
✅ :focus - 키보드나 마우스의 이벤트 or 다른 형태의 해당 요소가 포커스를 가지고 있는 상태
✔️ :hover은 반드시 :link와 :visited가 먼저 정의된 후에 정의
✔️ :active는 반드시 :hover가 먼저 정의된 후에 정의 -
상태 의사 클래스(UI element states pseudo-class)
✅ :checked - 체크된 상태의 input요소 모두 선택
✅ :enabled - 사용할 수 있는 input요소 모두 선택
✅ :diabled - 사용할 수 없는 input요소 모두 선택 -
구조 의사 클래스(structural pseudo-class)
✅ :first-child - 자식요소 중 맨 앞에 위치하는 자식요소
✅ :last-child - 자식요소 중 맨 마지막에 위치하는 자식요소
✅ :nth-child - 자식요소 중 앞에서부터 n번째 위치하는 자식요소
✅ :nth-last-child - 자식요소 중 뒤에서부터 n번째 위치하는 자식요소
✅ :first-of-type - 자식요소 중 첫번째 특정 타입
✅ :last-of-type - 자식요소 중 마지막 특정 타입
✅ :nth-of-type - 자식요소 중 n번째 특정 타입
✅ :nth-last-of-type - 자식요소 중 뒤에서 n번째 특정 타입
✅ :only-child - 자식요소를 단 하나만 가지는 요소의 자식요쇼
✅ :only-of-type - 자식요소로 특정 요소 단 하나만 가지는 요소의 자식요소
✅ :empty - 자식요소를 전혀가지고 있지 않은 요소 모두선택
✅ :root - 문서 root
🐥 의사 요소 pseudo-element
✅ ::first-letter - 텍스트 첫글자, block타입요소에만 사용
✔️ 속성: font, color, background, margin, padding, border,text-decoration, text-transform, line-height, float, clear, vertical-align(float 속성값이 none일때만)
✅ ::first-line - 텍스터 첫라인, block요소에만 사용
✔️ 속성: font, color, background, word-spacing, leter-spacing, text-decoration, text-transform, lin-height, clear, vertical-align
✅ ::before - 특정요소 내용 바로 앞에 다른 요소 삽입
✅ ::after - 특정요소 내용 바로 뒤에 다른 요소 삽입
✅ ::selection - 해당 요소에서 사용자가 선택한 부분만 선택
🐥 속성 선택자
✅ 기본 속성 선택자
✔️ [속성이름]선택자
✔️ [속성이름="속성값"]선택자
✅ 문자열 속성 선택자
✴️ [속성이름~="속성값"]: 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어 포함하는 요소 모두 선택
✴️ [속성이름!="속성값"]: 특정 문자열로 이루어진 하나의 단어로 시작하는 요소 모두 선택
✴️ [속성이름^="속성값"]: 특정 문자열로 시작하는 요소 모두 선택
✴️ [속성이름$="속성값"]: 특정 문자열로 끝나는 요소 모두 선택
✴️ [속성이름*="속성값"]: 특정 문자열을 포함하는 요소 모두 선택
- 기타
✅ :not - 모든 선택자와 함께 사용 가능, 해당 선택자를 반대로 적용하여 선택
✅ :lang - 특정 html요소를 사용자 컴퓨터 언어설정에 따라 다르게 표현할 때 사용
