CSS | 7. 조합자와 가상선택자

문서의 구조. 문맥이나 요소의 구조를 기반으로 선택자를 조합하는 것

부모요소 — 부모 요소는 그 요소를 포함하는 상위 요소로 단 하나 뿐

자식요소 — 부모 요소와 반대로 자식 요소는 여러개일 수 있습니다.
형제요소 — <div>, <p>

자손 선택자는 선택자 사이 공백

1

div span {color: red;}

cs

자식 선택자는 > (꺽쇠 기호) 삽입

1

div > p {color: red;}

cs

인접 형제 선택자 : + 기호 삽입

1

div + p {color: red;}

cs

Html 과 CSS는 정적인 언어이기 때문에 동적인 변화에 대처할 수가 없습니다. 자주 쓰이는 여러 패턴들에 대하여 미리 정의해 놓고 가상 클래스로 제어할 수 있게 해 줍니다.

: (콜론) 기호를 써서 표시

link — 아직 방문하지 않은 앵커
visited — 이미 방문한 하이퍼링크

1
2

a:link {color: blue;}
a:visited {color: purple;}

cs

focus — 현재 입력 포커스를 가진 요소
hover — 마우스 포인터가 있는 요소
active — 사용자 입력으로 활성화된 요소

1
2
3

a:focus {background-color: yellow;}
a:hover {color: red;}
a:active {color: blue;}

cs

가상 요소는 :: (더블 콜론) 사용. 하위 브라우저에서는 : (콜론) 사용
1. ::before
2 ::after
3. ::first-line
4. ::first-letter

관련포스트

CSS | 선택자

CSS | 폰트 텍스트 관련

CSS | 구문과 적용 방법

CSS | 개념

CSS | 박스모델

바이트비트