📌 동적 가상클래스 선택자

• html 요소의 상태에 따라서 변경할 수 있는 동적 가상 선택자
• 요소는 하난데 사용자의 동작에 따라서 스타일을 변경할 수 있는 것
  ex) 어떤 요소위에 마우스를 올리거나, 커서를 클릭해서 포커스를 맞춘다거나
• 자바스크립트 말고도 css로 만으로 스타일 변경할 수 있음
• user가 마우스를 올리거나 클릭할 거 같은 대상들에 적용
  ex) 링크, 메뉴, 버튼, input창
• input 요소에서 많이 사용되는 선택자

🍫 하이퍼링크에 적용할 수 있는 두가지 상태

1.link

• 링크를 한번도 클릭한 적이 없어 웹사이트에 방문한 적이 없을 때

2.visited

• 한번이라도 방문한 적이 있을 때 (브라우저 방문기록에 남아있는 경우)

🍫 hover

• 마우스를 올렸을 때 적용

🍫 active

• 마우스로 클릭하고 있을 때 적용(마우스 다운)
• 클릭하고 마우스를 떼기 전까지의 상태
• hover 쓰고 다음줄에 쓰는 게 좋음

🍫 focus

• input text 글 쓰려고 클릭하거나 tab키를 누르면 특정요소에 포커싱이 되었을 때

🍫 enabled

• disabled 가 아닐 때를 얘기, 디폴트값임
• 활성화되어 있는 요소에만 스타일 적용하고 싶을 때

🍫 disabled

• disabled 속성이 적용되어 있는 상태
• 비활성화 되어있는 요소에만 스타일 적용
• disabled 라는 속성을 가질 수 있는 요소에는 다 사용가능

🍫 checked

• 체크박스나 라디오 같은 경우 클릭을 하는 순간 checked 속성이 생기는 것
• checked 라는 속성을 가질 수 있는 요소에는 다 사용가능

  ---

📌 가상 요소 선택자

selector::____

🍫 before, after

• 실제로 존재하지 않는 요소를 만들거나 범위를 만들어서 스타일 적용
  css로 만들어낸 가상의 요소
• 실제 컨텐츠라고 인식하지 않고 꾸밈을 위한 요소라고 생각(드래그 안됨)
• 클래스가 없지만 있는 것처럼(실제 존재하지 않는 상태) 이름을 붙여줘서 가상클래스 선택자

ex)

.movie::before {
content:'문자열';
}

🍫 first-letter

• 첫번째 글자에만 스타일 적용
  before 있다면 before 텍스트에 적용됨

🍫 first-line

• 첫번째 줄에만 스타일 적용
• 브라우저 가로폭에 대해서 첫번째 줄

🍫 selection

• 선택영역 = 드래그된 영역 스타일 적용

  ---

📌 선택자 결합

🍫 하위선택자

• 앞에 있는 선택자는 태그,클래스,아이디 등 선택자 다 가능
• ul태그에 있는 하위 list item 중에 마지막 item만 스타일링 하고 싶은 상황

ex)

#list li:last-of-type {

}

🍫 자식선택자

• 바로 밑에 자식들 중에서 선택(직속)

ex)

#list > li:last-of-type {

}