Bagaimana cara menerapkan gaya ke semua turunan dari suatu elemen

Saya memiliki elemen dengan class='myTestClass'. Bagaimana cara menerapkan gaya css untuk semua anak elemen ini? Saya hanya ingin menerapkan gaya pada elemen anak-anak. Bukan cucu.

Saya bisa menggunakan

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

yang cocok untuk semua divanak, tetapi saya ingin solusi yang berhasil untuk semua anak. Saya pikir saya bisa menggunakan *, tapi

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

tidak bekerja.

Sunting

The .myTestClass > *pemilih tidak berlaku aturan di firefox 26, dan tidak ada aturan lain untuk margin sesuai dengan pembakar. Dan itu berhasil jika saya ganti *dengan div.

Seperti yang dikomentari oleh David Thomas , turunan dari elemen anak tersebut (kemungkinan) akan mewarisi sebagian besar gaya yang ditetapkan ke elemen anak tersebut.

Anda perlu membungkus .myTestClassdi dalam elemen dan menerapkan gaya ke turunan dengan menambahkan .wrapper * pemilih turunan . Kemudian, tambahkan .myTestClass > * pemilih anak untuk menerapkan gaya ke elemen anak, bukan anak cucu. Contohnya seperti ini:

JSFiddle - DEMO

.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>

Alih-alih *selektor Anda dapat menggunakan :not(selector)dengan >selektor dan mengatur sesuatu yang pasti tidak akan menjadi anak-anak.

Sunting: Saya pikir akan lebih cepat tetapi ternyata saya salah. Mengabaikan.

Contoh:

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


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