Skip to main content

CSS선택자(가상 클래스/가상 요소2)

가상 선택자​

:active​

  • 클릭시 활성화(누르고 있는 동안)

:visited​

  • 사용자가 이미 방문한 링크일 경우 적용
  • 웹 브라우저의 방문 기록 정보를 사용

:hover​

  • 마우스 커서를 요소에 올려두었을 때

:focus​

  • focus 받은 상태를 나타냄.

focus-visible​

  • :focus와 유사하게 받은 상태를 확인
  • <button> 요소 클릭시 차이를 확인
note

focus vs focus-visible

  • focus-visible은 포커스된 요소에 대한 스타일 지정이 가능
  • focus와 비슷해 보이지만 접근성 고려를 위해서는 focus-visible 선택자가 적절

:focus-within​

  • 요소를 포커스 했을 때, 요소 혹은 요소의 부모에서 해당 선택자를 사용
  • 즉, 쉽게 말하면 자식에게 이벤트가 발생하였는데, 부모에게 이벤트 효과를 주고싶다면 :focus-within을 사용하면 된다.

:enabled , :disabled​

  • 활성화 / 비활성화 상태

속성 선택자​

[속성이름]​

  • 해당 속성을 가진 요소 모두 선택

[속성이름~="속성값"] 선택자​

  • 특정 문자열로 이루어진 단어를 포함하는 요소를 모두 선택

[속성이름 |= "속성값"] 선택자​

  • 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈 -기호가 있는 태그

[속성이름^="속성값"] 선택자​

  • 특정 문자열로 시작하는 요소를 모두 선택

[속성이름$="속성값"] 선택자​

  • 특정 문자열로 끝나는 요소를 모두 선택

[속성이름*="속성값"] 선택자​

  • 특정 문자열를 포함하는 요소를 모두 선택
/* 주석이 되어 있는 것은 해당 사항이 안되는 것들 */
/* [속성이름] */
[title]{
	text-decoration:underline;
}

/* [속성이름~="속성값"] 선택자 */
[class~="btn"]
class="btn"
class="btn reset"
class="reset btn"
/* class="btn-negative" */
/* class="btn-positive" */

/* [속성이름|="속성값"] 선택자 */
[class~="btn"]
class="btn"
/* class="btn reset" */
/* class="reset btn" */
class="btn-negative"
class="btn-positive"

/* [속성이름^="속성값"] 선택자 */
[class~="btn"]
class="btn"
class="btn reset"
/* class="reset btn" */
class="btn-negative"
class="btn-positive"

/* [속성이름$="속성값"] 선택자 */
[class$="negative"]
class="btn-negative"
/* class="btn-negative error" */
class="error btn-negative"
class="message-negative"
/* class="message-negative-error" */

/* [속성이름*="속성값"] 선택자 */
[class*="btn"]
class="btn-a"
class="a-btn"
class="eeebtneee"