CSS 에서 정말 유용하게 쓰이는 셀렉터

CSS에서 가장 기본적인 셀렉터 지정방법은 요소, 요소의 ID, 요소의 CLASS 등이 있다. 이런 지정 방법은 가장 이해하기쉽고, CSS를 배우기 위해선 기본적으로 알고 있어야 한다. 아래는 이런 지정방법의 사용 예제이다. 

 CSS 셀렉터 예제

---

<style>
#wrap{ background-color:black; padding:10px; width:300px;}
a{ text-decoration:none; color:#95afc9;}
.bold_font{ font-weight:900; color:white;}
</style>

<div id='wrap'>
<a href='http://tistory.com'>티스토리</a>
<b class='bold_font'>위의 링크를 클릭하시면 티스토리 홈페이지로 이동합니다.</b>
</div>

 실행결과

---

위의 예제에서는 가장 기본적인 셀렉터의 사용방법을 보여주었다. 그렇다면, 이것말고도 평소에 자주 쓰이는 유용한 셀렉터는 어떤 것들이 있는지 알아보도록하자. 아래는 자주 사용되는 몇가지 셀렉터들의 사용예제 이다.

 요소명[속성명], 요소명[속성명="속성값"]

---

<style>
p[title]{ color:red; }
p[class="dreamload"]{ color:blue; }
</style>
<p title='Dreamload'>요소의 속성명을 지정</p>
<p class='dreamload'>요소의 속성명의 속성값을 지정</p>

 실행결과

---

물롬 위의 셀렉터 형식 말고도 지정할 수 있는 형식은 여러가지가 있지만, 특별한 경우가 아닌 이상, 자주 사용되지는 않는다. 아래는 유사 클래스의 지정 방법이다. 유사 클래스란 요소의 속성명 또는 속성값이 아닌 형식을 지정하는 방법을 뜻한다. 우선 아래를 보면 쉽게 이해할 수 있다.

 요소명:유사 클래스

---

<style>
a:link{ color:blue; /* 아직 클릭하지 않은 링크의 속성 */ }
a:hover{ color:red; /* 링크에 마우스 커서를 올려놓았을 시 */ }
a:visited{ color:#999;/* 이미 클릭한 링크에 대한 속성 */}
a:active{ background-color:red; /* 링크를 클릭했을 시 */ }
a:focus{ font-weight:bold; /* 포커스가 링크로 이동했을 시 */}

p:empty{ border:solid 3px red; width:200px; /* 아무 내용도 갖지 않는 요소*/}
li:first-child{ font-weight:bold; /* 요소의 첫번째 자식 */ }
li:last-child{ font-weight:bold; /*요소의 마지막 자식 */}
li:not(:first-child){ color:blue; /*첫번째 자식요소가 아닌 요소*/}
</style>

<a href="http://b.redinfo.co.kr">Dreamload</a>
<p></p>
<ul>
<li>li 요소의 첫번째 자식</li>
<li>li 요소의 두번째 자식</li>
<li>li 요소의 세번째 자식</li>
<li>li 요소의 네번째 자식</li>
</ul>

 실행결과

---

위에서는 언급되지 않았지만, 아래처럼 홀수와 짝수의 요소자식과, 특정 자식요소마다 스타일을 줄 수 있는 지정방식이 있다. 이러한 지정방식도 많이 사용되고 있다.

 특정 자식 요소마다 스타일을 적용할때

---

요소명:nth-child(2n+1)

->홀수 자식요소

요소명:nth-child(2n)

->짝수 자식요소

요소명:nth-child(odd)

->홀수 자식요소

요소명:nth-child(even)

->짝수 자식요소