[CSS] Selector

selector

CSS가 적용될 대상을 지정하는 방법

1. 태그 이름

ex) 

h1 { color: red;}

2. class : 앞에 점을 포함한 단어 명시(단어는 직접 네이밍한다.)

HTML태그에 class속성으로 단어를 연결(이때 점은 제외함)

- 태그 종류에 상관 없이 여러번 재사용 가능

.hello{ color : red; }
<div class="hello"> </div>

3. id : 앞에 #을 포함한 단어를 명시 (단어는 직접 네이밍 한다.)

HTML태그에 id속성으로 단어를 연결( 이때는 #을 제외함 )

- 하나의 HTML문서 안에서 다른 요소와 중복될 수 없다.

#hello {color : red; }
<div id="hello"> </div>

---

selector 조합하기

1) 구체적으로 서술하기 => 특정 요소를 자세하기 명시

태그 이름 + class

div,hello (띄어 쓰기 x)

태그 이름 + id

div#hello (띄어 쓰기 x)

2) 쉼표로 구분하기 (and의 의미)

div, p, #hello, world { ... }

3) 가상 클래스

HTML요소가 어떤 상황을 직면했을 '때' 적용되는 selector (~ 할때)

a:link { css 요소 }

a:visited { css 요소 }

a:hover { css 요소 }

a:active { css 요소 }

자식셀렉터

HTML의 계층구조를 순차적으로 ">"를 사용하여 표현한 것.

div >  span > input.form_control

<div>
    <span>
        <input type="text" class="form_control">
    </span>
</div>

자손셀렉터

HTML의 계층구조를 공백을 사용하여 표현한것. 반드시 순차적일 필요는 없다.

div span input.form_control

<div>
    ... ? ....
    <span>
        ... ? ...
        <input type="text" class="form_control">
        ... ? ...
    </span>
    ... ? ...    
</div>

속성셀렉터

HTML태그의 속성과 값을 [ ]안에 표현함.

셀렉터	설명
a[href]	href라는 속성을 갖는 a태그 (값은 상관없음)
a[href="#"]	href속성값이 "#"인 a태그 (값이 반드시 일치해야 함)
#hello[method='post']	method속성의 값이 post인, id값이 hello인 어떤 태그
.choose[value='123']	value속성의 값이 123인, class값이 choose인 어떤 태그

nth=child

CSS 셀렉터가 복수 요소를 의미할 경우 그 중에서 몇 번째인지를 지정. 대부분 class와 함께 사용한다.

* 카운트는 1부터!

셀렉터	설명
foo:nth-child(2)	foo라는 셀렉터를 갖는 요소 중에서 2번째
foo:nth-child(odd)	홀수번째
foo:nth-child(2n)	짝수번째
foo:nth-child(3n)	3의 배수번째
foo:nth-last-child(숫자)	nth-child와 같은 규칙이지만 뒤에서부터 요소를 카운트
foo:first-child	foo라는 셀렉터를 갖는 요소들 중에서 첫 번째
foo:last-child	foo라는 셀렉터를 갖는 요소들 중에서 마지막 항목