[CSS] 계층선택자-1

 계층 선택자

각 선택자, 태그는 대체로 계층형으로 구성되어있다.

-부모 계층 A를 기준으로 B, C, D의 자식 객체가 존재

-해당 계층 구조를 기준으로 예제 표기

 

1)자손 선택자(' ' : 공백 표기)

특정 부모 선택자를 기준으로 자식 선택자, 자식 선택자의 자식 선택자를 의미함

A의 자손 선택자 : B, C, D, E

B의 자손 선택자 : E

※E는 B의 자식이자 자손 선택자이다.

표기법

A의 자손 선택자 E

-> A E{

    설정

}

2)자식 선택자(> : 꺾쇠 기호)

부모 선택자의 직계 자손을 뜻함

A의 자식 선택자 : B,C,D

B의 자식 선택자 : E

표기법

B의 자식 선택자 E

-> B>E{

    설정

}

3)근접 후행 선택자(+)

같은 계층 중 인접한 선택자를 의미

B의 근접 후행 선택자 : C

C의 근접 후행 선택자 : B,D

D의 근접 후행 선택자 : C

표기법

B의 근접 후행 선택자 C

B+C {

    설정

}

4)후행 선택자

동일 계층의 모든 선택자를 지칭

B의 근접 후행 선택자 : C,D

C의 근접 후행 선택자 : B,D

D의 근접 후행 선택자 : B,C

표기법

B의 후향 선택자 D

B~D{

    설정

}