CODEWITHSUNDEEP
htmlcsscss-selectors
Schneider
Schneider

Reputation: 2506

Apply CSS rule to all elements inside?

I have some elements that goes like this

<div class="t-widget t-window">

Your code goes here

</div>

For that element and all elements i want to apply this rule

-webkit-box-sizing : content-box;
       -moz-box-sizing : content-box;
            box-sizing : content-box;

How easy that can be done?

Upvotes: 2

Views: 5835

Answers (1)

Harry
Harry

Reputation: 89780

You can do it using the below CSS setting:

CSS:

.t-widget, .t-widget ~ * { /* The ~ * selects all elements following it */
    color: red; /* Added just for illustration */
    -webkit-box-sizing : content-box;
    -moz-box-sizing : content-box;
    -o-box-sizing : content-box;
    box-sizing : content-box;
}

HTML:

<div>Your code goes here</div> <!-- Style will not be applied to this -->
<div class="t-widget t-window">Your code goes here</div> <!-- Style will be applied from this point on -->
<div>Your code goes here</div>
<div>Your code goes here</div>
<div>Your code goes here</div>

Demo

Edit: Just now saw your comment that you want for child elements. For that use the below CSS.

.t-widget, .t-widget * {
    color: red;
    -webkit-box-sizing : content-box;
    -moz-box-sizing : content-box;
    -o-box-sizing : content-box;
    box-sizing : content-box;
}

Updated Demo

Here you can have a look at the comprehensive list of CSS3 Selectors.

Upvotes: 5

Related Questions