Selector(선택자)

CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능이다.
무조건 class나 id를 붙여 스타일을 적용하기 보다는 선택자를 효율적으로 활용할 수 있다.

01 전체 선택자

*

전체 선택자는 HTML 페이지 내부의 모든 태그를 선택하는 선택자이다.
HTML에 기본으로 셋팅 되어 있는 스타일 등을 초기화 하는 등에 사용된다.

02 후손 선택자

선택자A 선택자B

후손 선택자는 부모 선택자 안에 들어있는 모든 자식 선택자를 말한다.

div span{color: red;}

위의 코드는 div 태그 안에 있는 모든 span 태그의 글씨색이 red로 변한다.

03 자손 선택자

선택자A>선택자B

자손 선택자는 부모 선택자 바로 아래 있는 계층의 선택자를 말한다.

div>span{color: red;}

위의 코드는 div 태그 안에 있는 span태그 중 '자손'인
바로 아래 계층의 span 태그만 글씨색이 red로 변한다.

<div>
	<h1>title</h1>
    <h3>subtitle</h3>
    	<div>
        	<p><span>content</span></p>
        </div>
    <span>footer</span>
</div>

위의 경우 후손 선택자로 선택했을 시 content에 해당하는 span과
footer에 해당하는 span 모두 선택되고
자손 선택자로 선택했을 시 footer 에 해당하는 span만 선택된다.

04 동위 선택자

선택자A+선택자B
선택자A~선택자B

동위 선택자는 동위 관계에서 뒤에 위치하는 태그를 선택하는 선택자이다.
선택자A+선택자B는 선택자A 바로 뒤에 위치하는 선택자B 를 선택한다.
선택자A~선택자B는 선택자A 뒤에 위치하는 선택자B 를 선택한다.

h1+span{ color: red;}
h1~span{ background-color: pink}

<h1>title</h1>
<span>a</span>
<span>b</span>
<span>c</span>

위의 경우 +로 작성된 스타일은
h1 태그 바로 밑의 'a' 가 작성된 span태그만 글씨색이 red로 변한다.
그러나 ~로 작성된 스타일은
h1 태그 밑의 span 태그 모두에 적용되어 'a,b,c' 모두 배경색이 pink로 변한다.

05 구조 선택자

구조 선택자는 같은 그룹 내의 순서로 지정하는 방법이다.

:first-child
:last-child
:nth-child(n)
:nth-last-child(n)

위와 같이 사용되어 지며, nth-child와 nth-last-child는 n 위치에 숫자를 기입해 사용한다.
이때 n 위치에 2n+1이나 odd를 입력해 모든 홀수 번째를 선택할 수 있고
2n이나 even을 입력해 모든 짝수 번째를 선택할 수 있다.