CSS기초- 기본셀렉터

기본셀렉터

전체 셀렉터

->
* {}

태그 셀렉터

->
h1 {}, div {}, p {} ...

ID 셀렉터

->
#id {}

class 셀렉터

->
.class {}

attribute 셀렉터

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식/후손/형제 셀렉터

자식 셀렉터

자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.
<header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, header요소의 자식인 <span> 요소의 자식인 <p> 요소는 선택되지 않는다.
(후손 셀렉터와의 차이를 반드시 알고 있어야 한다.)

->
header > p {}

후손 셀렉터

후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택함.
header요소의 자식 p요소 뿐만 아니라,
header요소의 자식인 span요소의 자식인 p요소까지 모두 선택됨.

->
header p {}

형제 셀렉터

형제 셀렉터는 같은 부모요소를 공유하면서, 첫 번째 입력한 요소뒤에 오는 두 번ㅉ 입력한 요소를 모두 선택함.
->
section ~ p {}

인접 형제 셀렉터

위의 형제 셀렉터와 거의 같지만 모두가아닌 가장 가까운 두 번째 입력한 요소를 선택한다.
->
section + p {}