CSS 셀렉터
- #id_name.class_name{} : id가 id_name이면서 class가 class_name인 엘리먼트를 선택. 앞뒤가 뒤바뀌어도 가능. 띄어쓰기에 주의하자
- div p {} : div의 후손 엘리먼트 중 p 엘리먼트를 선택
- div > p {} : div의 자식(부모 바로 아래 있는 자식만 해당) 엘리먼트 중 p 엘리먼트를 선택
- div + p {} : div와 인접한 형제 엘리먼트 p를 선택한다.
- div ~ p {} : div와 인접한 형제 엘리먼트 p를 모두 선택한다.
- p[id='one'] : 속성 셀렉터
의사 클래스를 사용한 셀렉터
- p:first-child {} : P 엘리먼트 중에서 첫 번째 자식 엘리먼트 선택
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
- p:last-child {} : P 엘리먼트 중에서 마지막 자식 엘리먼트 선택
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
- p:nth-child(n) {} : 자식 엘리먼트가 'n'에 해당되면서 p태그인 경우 선택(형제 요소 중 다른 태그도 표함된다.)
p:nth-child(2n+1) {}
p:nth-child(odd) {}
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
<div>
<p>first p</p>
<li>first li</li>
<p>second p</p>
<p>third p</p>
</div>
- p:nth-last-child(n) {}
- p:first-of-type {} : 형제 요소 중 자신의 유형과 일치하는 첫 요소 선택
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
- p:last-of-type {}
- p:nth-of-type(n) {} : 위의 :nth-child(n)와 구분하기. 같은 p 태그에서 'n'번째 요소만 선택할 수 있다.
p:nth-of-type(odd) {}
<div>
<p>first p</p>
<p>second p</p>
<p>third p</p>
</div>
<div>
<p>first p</p>
<li>first li</li>
<p>second p</p>
<p>third p</p>
</div>
- p:nth-last-of-type(n) {}
- p:not(#id_name) {} : 부정