Pseudo selector / Combinator /State

📌 Pseudo selector / Combinator

---

💡 element를 세부적으로 선택해주는 것

-first / last-child: 첫번째, 마지막
-nth(n): n번째
-even / odd: 짝수, 홀수번째
-2n+1: 두개씩 쌍으로 선택
-p span: p안에 있는 span 선택
-div > span: div바로 아래있는 자식 span. 부모와 자식 관계
-p + span: p안에 있는게 아니라 p '바로다음'에 오는 span. 형제관계
-p ~ span: 만약에 span이 p의 형제인데 바로 뒤에 오지 않을 때 쓸 수 있는 것이 "~"
-input[type="password"]: 타입이 패스워드 인 것
-input[placeholder~="name]: placeholder에 name이라는 단어를 포함한 모든 인풋. ! 앞뒤 공백이 있는 상태에서 name인 경우만 선택

📌 State

---

-active: 마우스로 클릭하고 있을 때 효과 적용
-hover: 마우스가 위에 올라갔을 때 효과 적용
-focus: 키보드로 선택되었을 때 효과 적용
-focus-within: 부모에만 적용됨. focused인 자식을 가진 부모 엘리먼트의 상태를 말한다.
(예시) div: focus-within{color: red;} 이면, div의 자식이 focus 될 때 중괄호 안이 작동됨
-visited: 링크에만 적용. 링크 방문했을 때
-form: hover input{}: form이 hover가 된 상태가 되면 input이 바뀌는 것. 이 조건은 form이 hover가 되어 있고 그 안에 input이 있을 때 적용
-form: hover input{}: form이 hover가 된 상태가 되면 input이 바뀌는 것. 이 조건은 form이 hover가 되어 있고 그 안에 input이 있을 때 적용
-::placeholder: placeholder의 특성만 바꾸고 싶을 때 사용
-::selection: 드래그할때
-::first-letter- 첫 글자만
-:first-letter- 첫 글자만