728x90
반응형
질문 : 특정 클래스 나 속성이없는 요소를 선택하는 CSS 선택기를 작성할 수 있습니까?
특정 클래스 가없는 모든 요소를 선택하는 CSS 선택기 규칙을 작성하고 싶습니다. 예를 들어, 다음 HTML이 주어지면 :
<html class="printable">
<body class="printable">
<h1 class="printable">Example</h1>
<nav>
<!-- Some menu links... -->
</nav>
<a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
<p class="printable">
This page is super interresting and you should print it!
</p>
</body>
</html>나는 선택을 작성하려합니다 선택이이 경우, 탐색 및 요소의 "인쇄"클래스가없는 모든 요소.
이것이 가능한가?
참고 : 이것을 사용하려는 실제 HTML에는 "인쇄 가능"클래스가없는 요소가 훨씬 더 많이있을 것입니다 (위의 예에서 그 반대라는 것을 알고 있습니다).
답변
:not() 의사 클래스에 클래스 선택기를 추가합니다.
:not(.printable) {
/* Styles */
}
:not([attribute]) {
/* Styles */
}당신은 더 나은 브라우저 지원이 필요하지만 (IE8 세 이상은 지원하지 않습니다 :not() ), 당신은 아마 더 "인쇄"클래스가 않습니다 요소에 대한 스타일 규칙을 만드는 길 이죠. 실제 마크 업에 대해 말 했음에도 불구하고 이것이 실현 가능하지 않은 경우 해당 제한을 우회하여 마크 업을 작업해야 할 수 있습니다.
이 규칙에서 설정하는 속성에 따라 일부 는 .printable 인 자손에 의해 상속되거나 다른 방식으로 영향을 미칠 수 있습니다. 예를 들어 display 가 상속되지는 않지만 display: none 을 :not(.printable) 하면 레이아웃에서 요소와 하위 트리가 완전히 제거되므로 해당 요소와 모든 하위 항목이 표시되지 않습니다. visibility: hidden 을 사용하여이 문제를 해결할 수 있습니다. 대신 보이는 하위 항목을 표시 할 수 있지만 숨겨진 요소는 원래와 마찬가지로 레이아웃에 영향을줍니다. 요컨대 조심하세요.
출처 : https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| HTML5 양식 요소의 유효성 검사 비활성화 (0) | 2021.08.06 |
|---|---|
| Node.js의 Connect, Express 및 "middleware"는 무엇일까? (0) | 2021.08.06 |
| JavaScript에서 "invalid date" 날짜 인스턴스 감지 (0) | 2021.08.06 |
| javascript 문자열에서 텍스트를 제거하는 방법 (0) | 2021.08.05 |
| Moment Js에서 두 날짜 간의 시간 차이 가져 오기 (0) | 2021.08.05 |