속성 선택기를 사용하여 CSS에서 요소 선택

Question

CSS에서는 HTML5 데이터 속성(예: data-role)을 통해 요소를 선택할 수 있나요?

Answer 1

속성은 내용에 관계없이 최신 브라우저에서도 선택할 수 있습니다.

다음 코드를 사용하세요:

으아악

예: http://codepen.io/jasonm23/pen/fADnu

대부분의 브라우저에 적용됩니다.

이 기능은 JQuery 선택기나 document.querySelector를 사용해도 작동합니다.

Answer 2

속성 선택기를 사용하려는 경우 다음을 수행할 수 있습니다.

으아아아

다양한 시나리오에 사용할 수 있는 다양한 속성 선택기가 있으며, 이에 대한 자세한 내용은 제가 제공하는 문서에 나와 있습니다. 사용자 정의 데이터 속성은 "새로운 HTML5 기능"이지만

• 브라우저에서는 일반적으로 비표준 속성을 지원하는 데 문제가 없으므로 속성 선택기와

  를 사용하여 필터링할 수 있습니다.

• CSS는 선택기 구문을 손상시키지 않는 한 네임스페이스가 아닌 속성 이름에 신경 쓰지 않으므로 CSS 유효성 검사에 대해서도 걱정할 필요가 없습니다.