[CSS] 선택자 - 속성선택자 / 자손, 후손선택자 / 동위(같은레벨)선택자

 

< 속성 선택자 >

 

- 스타일을 부여하고자 하는 요소 내에 작성되어있는 속성을 이용해서 선택하는 방법

- 기본 선택자 뒤에 []를 이용해서 속성과 속성값을 제시해서 선택하는 방법

 

=	선택자[속성=속성값] {스타일 속성:값, ... }	속성값이 해당 값과 '일치'하는 요소만 선택
~=	선택자[속성~=속성값] {스타일 속성:값, ...}	속성값에 해당 값이 '포함'되어있는 요소만 선택 (단어 기준으로 전체 일치)
*=	선택자[속성*=속성값] {스타일 속성:값, ...}	속성값에 해당 값이 '포함'되어있는 요소만 선택 (키워드-일반문자열 기준)
|=	선택자[속성|=속성값] {스타일 속성:값, ...}	속성값이 해당 값으로 '시작'하는 요소만 선택 (단어 기준으로 전체 일치, -로 구분될때 앞쪽 기준)
^=	선택자[속성^=속성값] {스타일 속성:값, ...}	속성값이 해당 값으로 '시작'하는 요소만 선택 (단어 기준으로 전체 일치)
$=	선택자[속성$=속성값] {스타일 속성:값, ...}	속성값이 해당 값으로 '끝'나는 요소만 선택

 

 

< 자손*선택자 / 후손*선택자 >

 

* 자손 : 바로 하위 요소들

* 후손 : 하위 요소들 전부

 

[ 표현법 ]

자손선택자 (>)	후손선택자 (공백)
부모요소 > 자식요소 {     스타일 속성 : 값;     ... }	부모요소  자식요소 {     스타일 속성 : 값;     ... }

 

 

< 동위(같은레벨)선택자 >

 

- 동위관계(같은레벨)에 있는 뒤에 위치한 특정 요소를 선택할 때 사용

 

a 요소 뒤에 있는 b 요소 '단 하나'만을 선택	a 요소 뒤에 있는 b 요소들을 '모두 다' 선택
a + b {     스타일 속성 : 값;     ... }	a ~ b {     스타일 속성 : 값;     ... }