[CSS] 동적 가상 선택자 / 속성 선택자

동적 가상 선택자

반응 선택자

• :active
  • 사용자가 마우스로 태그를 클릭한 상태
• :hover
  • 사용자가 마우스를 태그에 올려둔 상태

링크 선택자

• :visited
  • 방문 기록이 있는 링크를 가지고 있는 a태그를 선택한다
  • 위 예제에서는 붉은색으로 처리했음
• :link
  • href 속성을 가지고 있는 a태그를 선택한다
  • href 속성을 가진 태그는 이름 뒤에 " - 'url' " 이 붙도록 처리했음
  • Nothing은 a태그이지만, href 속성이 없어서 뒤에 아무것도 붙지 않았음

상태 선택자

• :focus
  • 초점이 맞춰진 input태그 등을 선택한다 (위 예제 사진에서 orange)
• :enabled
  • 사용 가능한 요소를 선택한다
• :disabled
  • 비활성화된 요소 (사용 불가능한 요소) 를 선택한다

속성 선택자

특수한 상황에서 쓰일 수는 있다고 한다

기본 속성 선택자

• 선택자[속성]
  • 특정 속성이 존재하는 태그를 선택
• 선택자[속성=값][속성=값]
  • 특정 속성안의 값이 특정 값을 가지고 있는 태그를 선택

※ 만약 input 태그의 경우 type 속성을 입력하지 않으면 자동으로 text가 디폴트로 들어간다

그러나 css에서는 HTML 태그의 디폴트값에 관심이 없다

문자열 속성 선택자

• [속성 ~= 값]
  • 속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택
• [속성 |= 값]
  • 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 뒤에 - 문자가 있는 태그 선택
• [속성 ^= 값]
  • 특정 값으로 시작하는 문자열을 속성값으로 가진 태그를 모두 선택
• [속성 $= 값]
  • 특정 값으로 끝나는 문자열을 속성값으로 가진 태그를 모두 선택
• [속성 *= 값]
  • 특정 값을 포함하는 문자열을 속성값으로 가진 태그를 모두 선택