How to Apply a Style to All Children of an Element

How do I apply a style to all children of an element

As commented by David Thomas, descendants of those child elements will (likely) inherit most of the styles assigned to those child elements.

You need to wrap your .myTestClass inside an element and apply the styles to descendants by adding .wrapper * descendant selector. Then, add .myTestClass > * child selector to apply the style to the elements children, not its grand children. For example like this:

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>

Apply CSS Style to child elements

This code "div.test th, td, caption {padding:40px 100px 40px 50px;}" applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements.

It is not the same as "all td, th and caption elements which are contained by a div element with a class of test". To accomplish that you need to change your selectors:

'>' isn't fully supported by some older browsers (I'm looking at you, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

add style to ALL child elements using plain javascript (multiple containers)

You could do it like this:

function sameHeightLinks() {  const linkContainers = document.querySelectorAll('.links');  linkContainers.forEach(container => {    if (container.childElementCount === 2) {      for (let i=0; i < container.children.length; i++) {        container.children[i].style.height = '59.5px';      }    }  });}sameHeightLinks();

<div class="links">  <a>Some link</a>  <a>Some link</a>  <a>Some link</a>  <a>Some link</a></div><div class="links">  <a>Some link</a>  <a>Some link</a></div><div class="links">  <a>Some link</a>  <a>Some link</a>  <a>Some link</a></div>

How can select all child elements by class or id using css?

Use a universal selector instead of a type selector.

.feature-section-heading > *

How can I dynamically set a style for all children of an element?

In plain CSS you can select either direct children or all descendants by using your (unique) class, or an ID

/* color only immediate children red */
.myclass > * {
    color: red;
}
/* color all descendants red */
.myclass * {
    color: red;
}
/* similar, with an ID */
#myelement > * {
    color: red;
}

Easy selectors for jQuery that match these are

var children = $('> *', $('.myclass'));
var descendants = $('*', $('.myclass'));

and you can use .each() on these.

Select all child elements of a class. CSS

you can use * selector, for example:

.element-wrapper *{
      margin: 10px;
      float: left;
    }

Applying a style to all child elements of a certain (named) stackpanel(or control)

Declare a default Rectangle Style in the Resources of the StackPanel:

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="White"/>
        </Style>
    </StackPanel.Resources>

    <Rectangle .../>
    ...
</StackPanel>

In case you have another default Rectangle Style higher in the element tree, you can base your "local default Style" on that Style be means of the Style's BasedOn property, like

<StackPanel.Resources>
    <Style TargetType="Rectangle" BasedOn="{StaticResource {x:Type Rectangle}}">
        <Setter Property="Fill" Value="White"/>
    </Style>
</StackPanel.Resources>

how to apply a style to all child elements of a particular type in scss?

In SCSS you would define:

.radioCircles {
  /* put any styling for the class here */
  input[type="radio"] {
    border-radius: 10px;
  }
}

How to apply a CSS height setting to all child elements?

This seems like an ideal situation for child selectors. Something along the lines of this though you would likely want to change your <p> to a <div>:

.panel-grid-cell, .panel-grid-cell > div {
    height: 100%;
}