특정 클래스나 속성이 아닌 요소를 선택하는 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>
저는 "인쇄 가능한" 클래스가 없는 모든 요소를 선택하는 선택기를 작성하고 싶습니다. 이 경우에는 nav와 요소입니다.
이것이 가능합니까?
참고: 실제 HTML에서 사용하고자 하는 것보다 "인쇄 가능한" 클래스가 없는 요소가 훨씬 더 많을 것입니다(위의 예에서는 반대라는 것을 알고 있습니다).
를 적으로 에추를니다에 합니다.:not()유사 클래스는 다음과 같습니다.
:not(.printable) {
/* Styles */
}
:not([attribute]) {
/* Styles */
}
더 지원이 하다면 (은 지원하지 :not()), "인쇄 가능한" 클래스가 있는 요소에 대한 스타일 규칙을 만드는 것이 좋습니다.당신이 실제 마크업에 대해 언급했음에도 불구하고 그것조차 실현 가능하지 않다면, 당신은 그 한계를 극복하기 위해 마크업을 해야 할 수도 있습니다.
이 규칙에서 설정하는 속성에 따라 일부 속성은 다음과 같은 하위 항목으로 상속될 수 있습니다. .printable아니면 어떤 식으로든 영향을 미칠 수도 있습니다.를 들어, 비록 예를들어비, 록록▁for.display 상되지, 설정을 설정합니다.display: none에서.:not(.printable)요소와 하위 트리를 레이아웃에서 완전히 제거하므로 요소와 하위 트리가 표시되지 않습니다. 다을사여이해수있결다습니할를문제음하용▁using다있▁by▁you▁get를 사용함으로써 이것을 수 .visibility: hidden대신 표시된 하위 항목을 표시할 수 있지만 숨겨진 요소는 원래와 마찬가지로 레이아웃에 영향을 줍니다.간단히 말해서, 그냥 조심하세요.
:not([class])
사실, 이은것 css 클가없는모든것다입것니선을택할래스것▁(다▁that입사▁actually▁anything니▁select▁class▁will▁a▁this▁does,▁have)가 없는 모든 것을 선택할 것입니다.class="css-selector"이 적용되었습니다이 적용되었습니다.
나는 jsfiddemo를 만들었습니다.
h2 {color:#fff}
:not([class]) {color:red;background-color:blue}
.fake-class {color:green} <h2 class="fake-class">fake-class will be green</h2>
<h2 class="">empty class SHOULD be white</h2>
<h2>no class should be red</h2>
<h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
<h2 class="">empty class2 SHOULD be white</h2>
<h2>no class2 SHOULD be red</h2>지원되나요?예: Caniuse.com (2020년 1월 2일자 기사):
- 지지: 98.74%
- 부분 지지율: 0.1%
- 합계: 98.84%
재미있는 편집, 저는 반대로 구글링을 하고 있었습니다. CSS 부정?
selector[class] /* the oposite of :not[]*/
부정 유사 클래스
CSS 클래스, 부정 CSS 사래스클,
:not(X)는 단순 선택기 X를 인수로 사용하는 함수 표기법입니다.인로표시지않요일다니치합와소. 선택기를는 안 .X에는 다른 음의 선택기가 포함되어서는 안 됩니다.
사용할 수 있습니다.:not일치하는 요소의 하위 집합을 제외하고 일반 CSS 선택기와 같이 순서가 지정됩니다.
간단한 예: 클래스별 제외
div:not(.class)
할 수 있습니다.div가 .class
div:not(.class) {
color: red;
}<div>Make me red!</div>
<div class="class">...but not me...</div>복잡한 예: 유형/계층별 제외
:not(div) > div
할 수 있습니다.div 남자 아이요의 div
div {
color: black
}
:not(div) > div {
color: red;
}<div>Make me red!</div>
<div>
<div>...but not me...</div>
</div>복잡한 예제: 유사 선택기 연결
체인/네스트가 불가능하다는 점을 제외하고는:not다른 유사 선택기와 함께 사용할 수 있는 선택기 및 유사 요소.
div {
color: black
}
:not(:nth-child(2)){
color: red;
}<div>
<div>Make me red!</div>
<div>...but not me...</div>
</div>브라우저 지원 등
:notCSS3 레벨 셀렉터이며 지원 측면에서 주요 예외는 IE9+입니다.
이 사양은 또한 흥미로운 점을 제시합니다.
그자리의
:not()쓸 수 .를 들면 예들어를.:not(*|*), 또는 전나타것는내없을음혀또는, 소가요▁which.foo:not(bar)는 와동한등에 합니다.foo하지만 더 높은 특수성을 가지고 있습니다.
효과가 있을 거라고 생각합니다.
:not(.printable)
"부정적인 CSS 선택기" 답변에서.
위의 :not()의 답변이 효과를 만들거나 뷰/DOM을 조정하는 것이 아니라 각도 형태에서 매우 효과적일 수 있다는 것에 기여하는 것처럼,
input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}
페이지를 로드할 때 입력 필드에 데이터가 추가되었지만(즉, 더 이상 기본값이 아닌) 잘못된 경우에만 입력 필드에 잘못된(빨간색 테두리 또는 배경 등) 내용이 표시되도록 합니다.
예
[class*='section-']:not(.section-name) {
@include opacity(0.6);
// Write your css code here
}
불투명도 0.6 "섹션-"을 제외한 모든 "섹션-"
클래스 로그인이 누락된 경우 특정 클래스 메뉴에 특정 CSS가 포함되도록 하려면:
body:not(.logged-in) .menu {
display: none
}
:not()유사 클래스:
특정 요소(또는 요소)를 제외한 모든 요소를 선택합니다.우리는 사용할 수 있습니다.:not() CSS 유사 클래스입니다.그:not()에는 유사클가는에필다니요합스가 필요합니다.CSSselector를 인수로 지정합니다.선택기는 인수로 지정된 요소를 제외한 모든 요소에 스타일을 적용합니다.
예:
/* This query selects All div elements except for */
div:not(.foo) {
background-color: red;
}
/* Selects all hovered nav elements inside section element except
for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
background-color: red;
}
/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) {
color: red;
}<div>test</div>
<div class="foo">test</div>
<br>
<section>
<nav id="foo">test</nav>
<nav>Hover me!!!</nav>
</section>
<nav></nav>
<br>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>우리는 이미 이 유사 클래스의 힘을 볼 수 있으며, 특정 요소를 제외하여 선택기를 편리하게 미세 조정할 수 있습니다.또한 이 유사 클래스는 선택기의 특수성을 증가시킵니다.예:
/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
color: red;
}
/* This selector is lower in the cascade but is overruled by the style above */
#foo {
color: green;
}<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>사용할 수 있습니다.:not(.class)앞에서 언급한 바와 같이 선택합니다.
만약 당신이 인터넷 익스플로러 호환성에 관심이 있다면, 저는 당신에게 http://selectivizr.com/ 을 사용하는 것을 추천합니다.
하지만 아파치에서 실행하지 않으면 효과를 볼 수 없다는 것을 기억하세요.
다른 사람들이 말했듯이, 당신은 단순히 :not(.class)를 넣었습니다.CSS 선택자들에게, 저는 이 링크를 방문하는 것을 추천합니다, 그것은 제 여정 내내 매우 도움이 되었습니다: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 .
div:not(.success) {
color: red;
}
부정 유사 클래스는 특히 유용합니다.컨테이너 ID가 있는 div를 제외한 모든 div를 선택하려고 합니다.위의 스니펫은 해당 작업을 완벽하게 처리합니다.
또는 단락 태그를 제외한 모든 요소(권장되지 않음)를 선택하려면 다음 작업을 수행할 수 있습니다.
*:not(p) {
color: green;
}
언급URL : https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr
'programing' 카테고리의 다른 글
| Postgre에서 어떤 타임스탬프 유형을 선택해야 합니까?SQL 데이터베이스? (0) | 2023.05.25 |
|---|---|
| JavaScript를 사용하여 이미지 크기(높이 및 너비)를 가져오는 방법 (0) | 2023.05.25 |
| Html에 "활성" 클래스를 추가하는 방법.ASP.NET MVC의 ActionLink (0) | 2023.05.25 |
| NTFS 성능 및 대용량 파일 및 디렉토리 (0) | 2023.05.25 |
| 웹에서 변수를 읽습니다.구성 (0) | 2023.05.25 |