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 요소에 다수의 의사 요소 동시 적용 가능
