要素のすべての子にスタイルを適用するにはどうすればよいですか


102

の要素がありclass='myTestClass'ます。この要素のすべての子にcssスタイルを適用するにはどうすればよいですか?子の要素にのみスタイルを適用したいと思います。その孫ではありません。

使用できます

.myTestClass > div {
  margin: 0 20px;
}

これはすべてのdiv子供に有効ですが、すべての子供に有効なソリューションが必要です。使えると思ったのです*

.myTestClass > * {
  margin: 0 20px;
} 

動作しません。

編集

.myTestClass > *セレクタは、Firefox 26にルールを適用しない、及び放火犯に係るマージンのために他のルールが存在しません。そして、に置き換える*と機能しdivます。


2
どのように「機能しない」のですか?これらの子要素の子孫は、(おそらく)それらの子要素に割り当てられたスタイルのほとんどを継承することに注意してください。
デビッドは、モニカを

インスペクターでこれをデバッグし、それを引き継ぐルールがあるかどうかを確認します
Brewal 2014年

回答:


147

David Thomasがコメントしたように、これらの子要素の子孫は、(おそらく)それらの子要素に割り当てられたスタイルのほとんどを継承します。

.myTestClass要素内をラップし、.wrapper * 子孫セレクターを追加してスタイルを子孫に適用する必要があります。次に、.myTestClass > * 子セレクターを追加して、孫ではなく要素の子にスタイルを適用します。たとえば、次のようになります。

JSFiddle-デモ

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}
<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>


4
ユニバーサルセレクターは絶対に使用しないでください。レンダリングに大きなパフォーマンスの影響を与えます。
yesIcan 2016

4
@yesIcan:わかりました。知っておくと便利です。ユニバーサルセレクターを使用しない別のソリューションはありますか?
マシューニコルズ

8
ユニバーサルセレクターのパフォーマンスは、最近のブラウザーではそれほど悪くありません。これがリファレンスです。私自身の職場での経験は、この著者の結論を裏付けています。
ネイサン

-2

*セレクターの代わりに、セレクターでを使用し:not(selector)て、>間違いなく子にならないものを設定できます。

編集:私はそれがより速いだろうと思ったが、それは私が間違っていたことが判明した。無視。

例:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>

5
これを行うことの利点は何ですか?
WilsonB​​iggs18年

3
@ WilsonB​​iggs-「ユニバーサルセレクターを使用しない」という誤った試みのようです。しかし、それは「ほぼユニバーサル」であるため、明らかに悪い考えですが、追加のテストが必要です。したがって、ユニバーサルセレクターが行うすべての作業を実行してから、追加の作業を実行する必要があります。
ToolmakerSteve

:not(selector)はサファリでのみ機能し、chrome / firefoxでは機能しないようです
gtamborero
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.