pseudo selector
조금 더 세부적으로 element를 선택할 수 있도록 해주는 것
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>예를들어 마지막 div를 선택하고싶다면,
div:last-child{
background-color: green;
}class나 id를 만들지 않고 선택할 수 있다.
div:nth-child(3){
background-color: green;
}nth-child(n)를 사용하여 n번째만 바꿀 수 있다.
n대신 even, odd를 쓰면 짝수, 홀수번째만 바꿀 수 있다.
3n+1을 쓸경우 3개마다 한번씩 바뀐다.
combinators
<body>
<div>
<p>
aaaaaaaaaaaaaaaaaaa
<span>inside</span>
</p>
<span>hello</span>
</div>
</body>/*형태*/
parent x child {
~~~
}
/*예시*/
p + span {
~~~
}
div > p {
~~~
}
p ~ span {
~~~
}+는 형제관계(바로 밑에 있는 형제)를 나타낸다.
(div밑 p와 span은 형제관계)
<은 바로 밑 자식을 말한다.
(div 바로밑 자식은 p)
~는 형제인데 바로 뒤에 오지 않을 때 사용한다.
(위의 예시에서 span과 p 사이에 무언가 왔을 때)
state selector
- active 마우스가 어떤걸 클릭하고 있을 때
- focus 키보드 등으로 선택되었을 때
- visited 링크에서 클릭되었거나 방문한적이 있을 때
- focus-within focus된 자식을 가진 부모 엘리먼트에 적용됨 예를들어 어떤 form 내부에 element가 focus된 상태일때 그 form을 가리킨다.
그밖의 pseudo selector
required attribute를 가진 input
input:required{
...
}placeholder 중에 name을 포함한 input
input[placeholder~="name"]{
...
}
배운것을 기록하자