CODEWITHSUNDEEP
csscss-selectors
MTilsted
MTilsted

Reputation: 5545

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

I have an element with class='myTestClass'. How do I apply a css style to all children of this elements? I only want to apply the style to the elements children. Not its grand children.

I could use

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

which work for all div children, but I would like a solution which works for all children. I thought I could use *, but

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

does not work.

Edit

The .myTestClass > * selector does not apply the rule in firefox 26, and there is no other rule for margin according to firebug. And it works if I replace * with div.

Upvotes: 190

Views: 504671

Answers (3)

Mehulbhai Rathod
Mehulbhai Rathod

Reputation: 25

To apply a style to all children of an element in CSS, you can use the descendant combinator ( ). This combinator applies styles to elements that are nested within a specific parent element. Here's a general approach:

Basic Usage

If you want to apply a style to all direct and nested children of a parent element, you can use the following CSS:

.parent-element * {
   /* Your styles here */
}

In this example:

  • .parent-element is the class of the parent element.
  • The * selector targets all descendant elements of .parent-element.

Example

Suppose you have the following HTML structure:

<div class="parent-element">
  <p>This is a paragraph.</p>
  <div>
    <span>This is a span inside a div.</span>
  </div>
</div>

To style all children of the .parent-element, you could write:

.parent-element * {
  color: red;
  font-family: Arial, sans-serif;
}

This will make the text color of all nested elements within .parent-element red and set the font to Arial.

Direct Children Only

If you want to apply styles only to direct children (i.e., not to nested elements), use the child combinator (>) instead:

.parent-element > * {
  /* Your styles here */
}

Example

<div class="parent-element">
  <p>This is a paragraph.</p>
  <div>
    <span>This is a span inside a div.</span>
  </div>
</div>

CSS:

.parent-element > * {
  color: blue;
}

In this case, only the <p> element will have blue text because it's a direct child of .parent-element, while the <span> will not be affected.

Summary

  • Use .parent-element * to style all descendant elements.
  • Use .parent-element > * to style only direct children.

Feel free to adjust the selectors and styles to suit your needs!

Upvotes: 0

JPB
JPB

Reputation: 600

Instead of the * selector you can use the :not(selector) with the > selector and set something that definitely wont be a child.

Edit: I thought it would be faster but it turns out I was wrong. Disregard.

Example:

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


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

Upvotes: -1

Anonymous
Anonymous

Reputation: 10216

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>

Upvotes: 276

Related Questions