[HTML&CSS] States , Pseudo elements

 

 

 

 

 

[웹] States , Pseudo elements 

( UPDATE  2023 - 05 - 30 )

 

 

 

---

States

---

 

 

active

해당 요소를 마우스로 클릭 했을 때 효과를 적용

 

 

 

 

hover

마우스가 해당 요소 위를 지나갈 때 효과를 적용

 

 

 

 

focus

키보드로 선택 되었을 때 효과를 적용

 

 

 

 

visited

방문한 사이트일 경우에 효과를 적용

 

 

 

 

focus-within

부모 요소에게 적용.

자신의 자식 요소 중 하나가 focus되었을 때 효과를 적용 (자식 상태에 따라 부모 상태 바뀜)

 

 

 

 

form:hover input

form이 hover된 상태면 input이 바뀌는 것 (부모 상태에 따라 자식 상태 바뀜)

 

 

 

 

form:hover input:focus

form과 input의 상태 모두 충족해야 적용됨

 

 

 

 

 

 

---

Pseudo elements

---

 

 

 

Pseudo element

:(콜론)이 2개인 게 특징

 

 

 

 

::placeholder

placeholder 스타일링 가능케함

 

 

 

 

::selection

클릭해서 긁을 때 발생

 

 

 

 

::first-letter

첫줄에만 적용합니다.

 

 

 

 

::first-line

첫 줄에만 작용합니다.

 

 

 

 

---

출처

---

 

 

노마드 코더 코코아톡 클론코딩