(CSS) CSS 선택자

CSS 선택자

 

 

a { background-color: yellow; }

 

CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성

 

a: 선택자

background-color: 속성명(property)

yellow: 속성값(value)

 

선언시작, 선언구분자( ; )

 

선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킨다.

 

 

* {   } : 전체 선택자

 

h1, h2, p {   } : 그룹 선택자

 

header > h1 {   } : 자식 선택자, 부모 태그 바로 아래 계층에 있는 요소

 

header h1 {   } :  후손 선택자, 부모 태그 안에 들어가 있는 모든 요소

 

자식과 후손(자손) 선택자의 차이 - https://sectumsempra.tistory.com/57

 

속성 선택자

 

기본 속성 선택자  p[id=”only”] {   }

문자열 속성 선택자 

 

속성 선택자 정리 - http://www.tcpschool.com/css/css_selector_attribute

 

section ~ p {   } : 형제 선택자(일반 동위 선택자), 해당 요소와 동위 관계에 있으며 해당 요소보다 뒤에 존재하는 특정 타입의 요소 모두 선택

 

section + p {   } : 인접 형제 선택자(인접 동위 선택자), 해당 요소와 동위 관계 있으며 해당 요소 바로 뒤에 존재하는 특정 타입의 요소 모두 선택

 

a:hover {   } - 가상 클래스(의사 클래스, pseudo) : 선택하고자 하는 HTML 요소의 특별한 상태(state) 명시할 때 사용

 

• 동적 의사 클래스 : link, visited, hover, active, focus
• 상태 의사 클래스: checked, enabled, disabled
• 구조 의사 클래스: first-child, nth-child, first-of-type,nth-of-typ

 

의사 요소(pseudo-element) : 해당 HTML 요소의 특정 부분만을 선택할 때 사용

 

대표 의사 요소

- ::first-letter - 텍스트의 첫 글자만 선택. 블록 타입의 요소에 만 사용.

- ::first-line - 텍스트이 첫 라인만 선택. 블록 타입의 요소에 만 사용.

- ::before - 특정 요소의 내용 부분 바로 앞에 다른 요소 삽입시 사용

- ::after

- ::selection - 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용

 

하나의 HTML 요소에 다수의 의사 요소 동시 적용 가능