CSS:特定のクラス内にないすべてのタイプの要素を選択できますか?
-
06-07-2019 - |
質問
このページを取得したとしましょう:
<body>
<h1>Hello!</h1>
<div class="wrapper">
<div class="anotherclass">
<h1>Another heading 1</h1>
</div>
<div class="yetanotherclass">
<h1>Yet another heading 1</h1>
</div>
</div>
<h1>Good bye!</h1>
<div class="class">
<h1>Good bye. And this time I mean it.</h1>
</div>
</body>
そして、 wrapper
クラス内にないすべての H1
要素を選択します。 CSSでこれを行うにはどうすればよいですか?
「解決策」が必要ないのような
body h1, body .class h1 {style definitions}
私はこのようなことをした後のことです:
h1:not(.wrapper > h1) {style definitions}
これを行う方法はありますか?
解決
このようなことをした場合:
h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }
h1.class
では、 h1
ルールで定義したすべてをオーバーライドします。
例を次に示します。
<html>
<head>
<style type="text/css">
div { color:#00f; }
div.foo { color:#f00; }
</style>
</head>
<body>
<div class="foo">foo</div>
<div>bar</div>
<div>baz</div>
</body>
</html>
この例では、 foo
のクラスを持たないすべての div
を効果的にターゲットにしています。
他のヒント
CSSで求めていることはできません。 cssにまつわる全体的なアイデアはカスケードです。あなたがしたいのは、カスケードの流れに対抗することです。
タイドを使って通常のCSSを実行します:
h1 {style definitions}
.wrapper h1 {style definitions}
ユニバーサルセレクター*を使用してグローバルスタイリングを適用してから、ネストされたユニバーサルセレクターを適用できます。.wrapper *元々適用したスタイリングを元に戻す
* {font-weight:bold; border:thin solid red;}
.wrapper * {font-weight:normal; border: 0px solid white;}
所属していません StackOverflow