css 선택자

css 선택자를 이용하면 css를 보다 편하게 정리할 수 있다.

선택자의 종류

가장 많이 쓰이는 것이

태그 선택자 : 'body, div, ul' 등 태그에 직접 css를 정리

ID 선택자 : '#name' 등 ID를 지정하여 해당 ID에만 css를 지정

class 선택자 : '.name' 등 class를 지정하여 해당 class에 css를 지정

위와 같이 세가지가 가장 많이 쓰인다.

그외에 선택자를 알면 보다 쉽게  정리 할 수가 있다.

하위 선택자 : 'h1 p'등 이런식으로 선택자 사이에 space bar 를 하나 넣어 줌으로 인해 하위 선택자에 css를 지정

인접 선택자 : 'h1 + p' 처음 나온 바로 다음 두번째 스타일에만 css를 지정

자식 선택자 : 'h1 > p' 첫번째 태그내에 자식에 해당 되는 부분만 css를 지정

형제 선택자 : 'h1 ~h1' 자신을 제외한 모든 형제들에게 css를 지정

예시

태그 선택자, ID선택자, class선택자

<style>

h1 {color:ff0000}

#test {color:00ff00}

.test {color:0000ff}

</style>

<h1>test</h1>

<div id='test'>test</div>

<div class='test'>test</div>

결과물

test

test

test

하위 선택자

<style>

ul li {color:#ff0000}

</style>

<ul>

<li>test1</test>

<li>test2</test>

<li>test3</test>

</ul>

결과물

test1

test2

test3

인접 선택자

<style>

.test + li {color:#ff0000}

</style>

<ul>

<li class="test">test1</test>

<li>test2</test>

<li>test3</test>

</ul>

결과물

test1

test2

test3

자식 선택자

<style>

#test > h3 {color:#ff0000}

</style>

<div id="test">

<h3>test1</h3>

<div><h3>test2</h3></div>

<h3>test3</h3>

</div>

결과물

test1

test2

test3

형제 선택자

<style>

div~div {color:#ff0000}

</style>

<div>test1</div>

<div>test2</div>

<div>test3</div>

결과물

test1

test2

test3