본문 바로가기

Study Output for Myself/CSS

[CSS]Pseudo-classes(가상선택자) Pseudo-element(가상요소)

<가상선택자>

✅:focus

input, a, button, lable, select 등의 요소에 쓸 수 있는 가상선택자. 

click하면 적용된다.

focus가 안되는 요소에 focus를 적용하려면 property로 tabindex="-1"을 넣어준다. value에는 항상 -1을 넣을 것을 권장함.

✅:hover

마우스를 올리면 작동

✅:active

마우스를 클릭한 상태에서 작동

 

<가상요소>

✅::before

✅::after

content가 들어가야지만 작동한다.

inline요소로 가로세로를 지정해주고 싶다면 display:block으로 설정해줘야 함.

'Study Output for Myself > CSS' 카테고리의 다른 글

[CSS]flexbox  (0) 2022.07.19
[CSS]너비와 높이지정단위 vmin / vmax  (0) 2022.07.19
[CSS] rem VS em VS pix  (0) 2022.06.01