특정 클래스 나 속성이없는 요소를 선택하는 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 */
}
하지만 당신은 더 나은 브라우저 지원을 필요로하는 경우 (IE8 이상 지원하지 않습니다 :not()), 당신은 요소에 대한 스타일 규칙을 만드는 떨어져 아마 더 좋을 것 같아 할 은 "인쇄"클래스가 있습니다. 실제 마크 업에 대해 말 했음에도 불구하고 그것이 실현 가능하지 않다면, 그 한계에 대해 마크 업을 작업해야 할 수도 있습니다.
속성에 따라 당신이이 규칙에있어 설정이, 그들 중 일부는 하나의 자손에 의해 상속 될 수 명심 있다 .printable , 또는 다른 어떤 식 으로든 그들에게 영향을줍니다. 예를 들어, 비록이 display설정 상속되지 않는다 display: none(A)에 :not(.printable)완전히 요소 및 레이아웃으로부터 하위 트리를 제거하기 때문에, 표시에서 그것의 모든 자손을 방지한다. visibility: hidden대신 보이는 하위 항목을 표시하도록 허용 하는 대신 사용하여이 문제를 해결할 수 있지만 숨겨진 요소는 원래와 마찬가지로 레이아웃에 영향을줍니다. 요컨대 조심하세요.
:not([class])
실제로 이것은 CSS 클래스 ( class="css-selector")가 적용 되지 않은 모든 것을 선택 합니다.
jsfiddle 데모를 만들었습니다.
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 (2014 년 8 월 25 일 접속) :
- 지원 : 88.85 %
- 부분 지원 : 4.36 %
- 합계 : 93.21 %
웃긴 편집, 나는 : not의 반대를 위해 인터넷 검색을했습니다. CSS 부정?
selector[class] /* the oposite of :not[]*/
:not부정 의사 클래스
부정 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>Complex example: chaining pseudo selectors
With the notable exception of not being able to chain/nest :not selectors and pseudo elements, you can use in conjunction with other pseudo selectors.
div {
color: black
}
:not(:nth-child(2)){
color: red;
}<div>
<div>Make me red!</div>
<div>...but not me...</div>
</div>Browser Support, etc.
:not is a CSS3 level selector, the main exception in terms of support is that it is IE9+
The spec also makes an interesting point:
the
:not()pseudo allows useless selectors to be written. For instance:not(*|*), which represents no element at all, orfoo:not(bar), which is equivalent tofoobut with a higher specificity.
I think this should work:
:not(.printable)
From "negative css selector" answer.
Just like to contribute that the above answers of :not() can be very effective in angular forms, rather than creating effects or adjusting the view/DOM,
input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}
Ensures that on loading your page, the input fields will only show the invalid (red borders or backgrounds, etc) if they have data added (i.e. no longer pristine) but are invalid.
Example
[class*='section-']:not(.section-name) {
@include opacity(0.6);
// Write your css code here
}
// Opacity 0.6 all "section-" but not "section-name"
You can use :not(.class) selector as mentioned before.
If you care about Internet explorer compatibility I recommend you to use http://selectivizr.com/.
But remember to run it under apache otherwise you won't see the effect.
Using the :not() pseudo class:
For selecting everything but a certain element (or elements). We can use the :not() CSS pseudo class. The :not() pseudo class requires a CSS selector as its argument. The selector will apply the styles to all the elements except for the elements which are specified as an argument.
Examples:
/* 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>We can already see the power of this pseudo class, it allows us to conveniently fine tune our selectors by excluding certain elements. Furthermore, this pseudo class increases the specificity of the selector. For example:
/* 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>As others said, you simply put :not(.class). For CSS selectors, I recommend visiting this link, it's been very helpful throughout my journey: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
div:not(.success) {
color: red;
}
The negation pseudo class is particularly helpful. Let's say I want to select all divs, except for the one which has an id of container. The snippet above will handle that task perfectly.
Or, if I wanted to select every single element (not advised) except for paragraph tags, we could do:
*:not(p) {
color: green;
}
'program tip' 카테고리의 다른 글
| 숨겨진 커밋되지 않은 변경 사항을 복구하는 방법 (0) | 2020.10.03 |
|---|---|
| 모든 Git 태그를 나열하는 방법은 무엇입니까? (0) | 2020.10.03 |
| 두 JavaScript 객체의 동등성을 결정하는 방법은 무엇입니까? (0) | 2020.10.03 |
| Xcode의 버전 대 빌드 (0) | 2020.10.02 |
| Oracle JDK와 OpenJDK의 차이점 (0) | 2020.10.02 |