클래스 선택자

태그에 특정 클래스가 적용되어 있는 경우 해당 클래스를 가진 태그를 .(점)문자를 사용하여 선택합니다.

<span class="color_span">CLIEL</span>

▶span 태그에 color_span 클래스 적용

.color_span {
 color:red;
}

▶color_span 클래스 사용 태그 선택

같은 클래스를 사용하는 서로 다른 태그에서 특정 태그만을 선택해야 한다면 <태그>.<클래스> 형식으로 지정해야 합니다.

<span class="color_span">CLIEL</span>
<p class="color_span">CLIEL</p>

▶다른 태그에 같은 color_span 스타일 적용

span.color_span {
 color:red;
}

▶span의 color_span만을 선택

또한 하나의 태그에 여러 클래스가 적용된 경우

<span class="color_span bold_span">CLIEL</span>

해당 클래스 모두 선택이 가능하며 각각의 스타일 적용이 가능합니다.

.color_span {
 color:red;
}

.bold_span {
 font-weight:bold;
}

상태 선택은 사용자로 부터 어떤 값를 입력받는 요소에 많이 쓰이는 선택자 입니다.

<input type="radio" id="man" name="sex" />남<br />
<input type="radio" id="woman" name="sex"  disabled="disabled" />여

<span id="o_man">남자를 선택함.</span>
<span id="o_false">사용 불가</span>

(1) checked

input 요소를 check 상태로 만들었을때를 의미합니다.

#man:checked ~ #o_man {
 color:red;
}

▶ man id 의 input 요소를 check 상태로 만들면 그 앞에 있는 모든 요소중 id가 o_man인 tag에 style을 적용

(2) disabled / enabled

#woman:disabled ~ #o_false {
 color:blue;
}

▶ woman id의 input 요소가 disabled 로 사용이 불가능하면 그 앞에 있는 모든 요소중 id가 o_false인 tag에 style을 적용, 반면 enabled 로 하면 사용가능임.

(3) focus

input:focus {
 color:red;
}

▶ input 요소중 focus 상태인 것이 있으면 해당 input에 style을 적용

태그 선택자

특정 태그를 사용하여 해당 문서내에 지정된 태그만을 선택합니다.

span {
 color:red;
}

만약 여러태그에 동일한 스타일을 적용하려면 해당 태그를 ,(콤마)로 구분해 지정합니다.

span, p {
 color:red;
}

속성 선택자

문서내에 요소중 특정 속성과 그 값을 가진 태그만을 선택하도록 합니다.

이름 : <input type="text" id="input_name" /><br />
<input type="button" value="확인" />

▶요소 정의

input[type=text] {
 border-color:red;
}

▶정의된 요소중 type 속성이 text 인것만 해당 스타일 적용

하나의 속성이 아닌 여러 속성을 지정해야 한다면 []로 '[속성=값][속성=값]'처럼 연결하면 됩니다.

만약 값이 아닌 속성만을 대상으로 해야 한다면 값을 제외하고 다음과 같이 지정합니다.

input[type] {
 border-color:red;
}

▶type 속성을 가진 요소만을 선택

속성과 값 사이에 특정 연산자를 사용하면 값의 구분을 제어할 수 있습니다. 위 예제에서는 = 기호만을 사용해 정확히 값에 일치하는 요소만을 선택하였으나 다음 표의 기호를 사용하면 값의 대한 선택방법을 좀더 유동적으로 바꿀 수 있습니다.

~=	속성이 '값'을 단어로 포함하고 있는 요소를 선택
^=	속성이 '값'으로 시작하는 요소를 선택
$=	속성이 '값'으로 끝나는 요소를 선택
*=	속성이 '값'을 포함하는 요소를 선택

예를 들어 아래에 attr_type 이라는 특정 속성이 적용된 경우

이름 : <input type="text" attr_type="aaa bbb" id="input_name" /><br />
<input type="button" attr_type="aaabbb" value="확인" />

선택자를 다음과 같이 지정했을때

input[attr_type~=bbb] {
 border-color:red;
}

input이 text 인 첫번째 태그가 선택됩니다. ~= 기호는 단어로서 포함되는 내용을 지정하기 때문에 aaa bbb 처럼 aaa와 bbb가 구분되어 bbb값을 따로 볼 수 있는 형태의 태그만 선택되는 것입니다. 두번째 input의 attr_type속성 값은 aaabbb 이므로 bbb를 별도의 단어로 인식하기에는 어려워 보입니다.

반면 아래 정의는

input[attr_type*=bbb] {
 border-color:red;
}

두개의 input 요소 모두를 선택하도록 합니다. *= 기호는 해당 속성에 지정된 값을 포함하고 있는 것이면 되므로 aaa bbb든 aaabbb든 모두 해당합니다.

input[attr_type^=aaa] {
 border-color:red;
}

위 선택자는 attr_type 속성의 값이 aaa로 시작하는 요소를 의미하므로 이것 역시 aaa bbb든 aaabbb든 모두 해당합니다.

말 그대로 선택자로 지정한 것이 아닌 것을 선택하는 선택자이며 not 을 사용합니다.

이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />

위 구조에서

input:not([type=text]) {
 color: red;
}

위와 같이 부정선택자를 사용하면 type이 text가 아닌것(예제에서 type이 button)만 선택하여 style을 적용하게 됩니다.

먼저 구조선택은 구조상 같은 위치의 태그를 선택하기 위해 다음 4가지 keyword를 사용할 수 있습니다.

first-child	첫번째 태그
last-child	마지막 태그
nth-child	n번째 태그
nth-last-child	마지막에서 n번째 태그

예를 들면

<table>
 <tr>
  <td>이름</td>
  <td>주소</td>
  <td>나이</td>
  <td>전화</td>
 </tr>
</table>

위 구조에서 첫번째 td와 세번째 td를 구조태그로 선택하려면 다음과 같이 선택자를 작성할 수 있습니다.

td:first-child, td:nth-child(3) {
 color:red;
}

특히 nth- 선택자를 사용하면 뒤에 가변적인 수열을 작성해서 원하는 태그를 반복적으로 선택할 수 있습니다.

td:nth-child(2n+1) {
 color:red;
}

위 구현은 첫번째 선택자 구현과 결과가 일치합니다. 뒤에 지정한 숫자는 2n + 1이므로 1부터 시작해 2씩 더해져 첫번째와 세번째 td를 선택하게 합니다. 이 상태에서 만약 td태그가 1개 더 추가된다면 자연히 추가된 td도 선택자 영향을 받게 됩니다.

구조 선택은 조금 다른 방식으로 다음 선택자도 사용할 수 있습니다.

first-of-type	자손중 첫번째
last-of-type	자손중 마지막
nth-of-type	자손중 n번째
nth-last-of-type	자손중 마지막 n번째

이 선택자를 사용해 이미 언급한 태그에서 첫번째 td만을 선택하게 하려면 아래와 같이 선택자를 작성합니다.

tr > td:first-of-type {
 color:red;
}

▶ tr 자손중 첫번째 td를 선택

a tag 에서 href 속성이 적용된 다음과 같은 tag 를 선택하는 방법입니다.

<a href="http://www.daum.net/">다음</a>
<a href="http://www.naver.com/">네이버</a>

이와 같은 tag에서 사용할 수 있는 선택자는 다음과 같습니다.

a:visited {
 color: red;
}

▶ 이미 방문한 적이 있는 link는 붉은색으로 표시합니다.

a:link {
 color: blue;
}

▶ 모든 link tag 를 파란색으로 표시합니다.

<p>안녕하세요.<br />
반갑습니다.</p>

위 tag 에서 첫글자 '안'과 첫번째줄인 '안녕하세요'에 style을 적용하려면 아래와 같은 선택자를 사용합니다.

p::first-letter {
 font-size: 50px;
}

▶ 첫글자 '안'의 크기를 50px로 합니다.

p::first-line {
 color: red;
}

▶ '안녕하세요' 첫줄 전체를 붉은 색으로 합니다.

문자와 관련하여 반응형으로 동작하는 재미있는 선택자도 있는데

p::selection {  color: red; }

이와 같이 selection 선택자를 사용하면 사용자가 p tag 내부의 특정 내용을 drag 하여 선택했을때 선택한 부분만 붉은색으로 바뀌도록 합니다.

또 다른 형태로 아래 선택자를 사용하면 tag 내부의 처음 또는 마지막에 특정 내용을 추가할 수 도 있습니다.

p::before {
 content: "->";
}

▶ p tag 의 처음 부분에 '->' 내용을 추가합니다.

p::after {
 content: "<-";
}

▶ p tag 의 마지막 부분에 '<-' 내용을 추가합니다.

이때 content 는 p tag 내부의 요소를 의미하는 것으로 before나 after 선택자에서만 사용이 가능합니다.

반응 선택은 마우스를 특정 태그에 올리거나 클릭하는 경우에 스타일을 적용할 수 있도록 하는 선택자 입니다.

<span>CLIEL</span>

위 태그에서 사용자가 CLIEL에 마우스를 클릭하는 경우 특정 스타일로 반응하도록 하려면 반응 선택자를 다음과 같이 사용합니다.

span:active {
 color:red;
}

다른 반응 선택자로 hover라는 것도 있는데 이 것은 마우스 클릭이 아닌 단순히 올리는 경우에 해당하는 것으로서 IE에서 테스트결과 a 링크에만 적용되는 것으로 보입니다.

태그에 아이디 속성이 지정되어 있는 경우 #문자를 사용하여 해당 아이디 값을 가진 태그를 선택합니다.

<span id="test_span">korea!</span>

▶span 태그에 test_span 이라는 아이디 지정

#test_span {
 color:blue;
}

▶test_span 태그 아이디 선택

아이디는 중복이 가능하며 이런 경우 해당 아이디를 가진 모든 태그가 선택됩니다. 다만 중복을 권장하지 않습니다.

문서의 특정 태그에 특정한 스타일을 적용하기 위해서는 해당 태그에 대한 선택이 필요합니다. 이때 선택자 방식을 이용하게 되는데 이 선택자 방식은 CSS뿐만 아니라 jquery에서도 동일하게 사용됩니다.

선택자 형식은 다음과 같습니다.

선택자 { 속성 : 값; }

전체 선택

문서의 모든 태그(body를 포함하는 html 태그 전체)를 선택하는 방법으로 * 문자를 사용합니다.

* {
 color:red;
}