주요 선택자 & 속성 선택자 보다 더 디테일하고 작은 범위를 선택한다.
first-child
리스트 묶음 중 첫번째 요소들만 선택한다.
li:first-child {color: green;}=> 모든 리스트들 중 첫번째 요소를 green으로 변경한다.
.movie:first-child {font-size:40px}=> movie라는 class를 가진 것들 중 첫번째 요소만 폰트 사이즈가 40px로 변경된다.
*주의할 점: 정확히는, movie라는 class를 가진 것들의 부모의 첫번째 자식만 선택된다. 만약<ul> <li>Toy Story</li> <li class="movie">Zootopia</li> <li class="movie">Coco</li>이렇게 movie라는 class를 가진 것들의 부모
<ul>의 첫번째 자식요소 Toy Story가 class를 갖지 않는다면 아무것도 선택되지 않는다.
last-child
마지막 요소만 선택한다.
nth-child
N번째 요소만 선택한다.
li:nth-child(2) {color:hotpink;}
함수 사용도 가능하다.
li:nth-child(2n) => 짝수 = (even) li:nth-child(2n-1) => 홀수 = (odd)
first-of-type
특정 type의 첫번째 요소를 선택한다.
p:first-of-type {color: red;}=>
<p>들 중 첫번째 요소를 선택한다.
<div class="movie">Toy Story</div> <p class="movie">Zootopia</p>여기에
.movie:first-of-type {color:red;}를 하게 되면, movie를 class로 갖고있는 type이
<div>와<p>두가지다. 둘 다 각 type의 첫번째 자식요소 이므로 둘 다 선택된다.
selector1:not(selector2)
selector1을 고르되, selector2는 제외한다.
input:not(.pw) {background-color: indianred;}=> pw class를 제외한 모든 input의 배경색을 변경한다.
attribute을 선택하고 싶을 때는 대괄호를 사용한다.
input:not([type=password] {color: red;}
link, visited
방문하지 않은, 방문했던 링크들의 색깔 변경이 가능하다.
a:link {color: tomato;}=> 방문하지 않은 링크는 tomato색깔로 변경
a:visited {color:yellowgreen;}=> 방문했던 링크는 yellowgreen색깔로 변경
hover
마우스를 올렸을 때 적용되는 스타일
input[type=button]:hover {background-color: teal; color: white;}
active
마우스를 클릭하고 있을 때 적용되는 스타일
input[type=button]:active {background-color: red; color:black;}
*hover - active 순으로 작성하는게 좋다.
focus
어떤 요소가 포커싱 됐을 때 적용되는 스타일 ex) tap으로 포커싱 할 때나 text Box에 입력하려고 클릭했을 때
input[type=text]:focus {background-color: blue; color: white;}
enabled & disabled
html에서 disabled로 지정된 태그를 css에서 따로 꾸며줄 수 있다. disabled로 지정되지 않은 태그는 자동으로 enabled이고, css에서 동일하게 따로 꾸며줄 수 있다.
[css]
input[type=text]:enabled {background-color:skyblue;} input[type=text]:disabled {background-color:silver;}
Checked
이미 체크되어있는 체크박스 생성
input[type=checkbox]:checked { outline: 3px solid blue; }
