Applying CSS Styles to All Elements Inside a Div

Applying CSS styles to all elements inside a DIV

You could try:

#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}

Etc, etc... Is that what you're looking for?

Apply a CSS to all the elements of a particular div

Just put

.div1 * {
 color: blue;
}

Or even better, just

.div1 {
 color: blue;
}

In my first block of code, all subelements of elements with class div1 will have color: blue applied.

In the second block of code, only the elements with class div1 will have color: blue applied, but all subelements will also inherit it (unless they override it). Therefore the effect should be the same.

Apply Css style to all tags inside Div

You had to use in your CSS

#FirstSection, #FirstSection * {
  border: 1px solid red !important;
}

Note; The #FirstSection * is only for the nested elements. The * is a universal selector who fits for everything (the nested depth doesn't matter), but it has to be existant. So for your DIV itself you need #FirstSectionadditionally.

You can see it on this example:

#FirstSection, #FirstSection * {
  border: 1px solid red !important;
}

<div>Normal</div>
<div id="FirstSection">Firstsection
  <p>P-Test  </p>
  <table>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>
  <div>Second
    <span>Nested span</span>
    Div
    <a href='google.com'>google.com</a>
    <div>Third</div>
  </div>
</div>
<div>After</div>

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 on all elements except with a SPECIFIC ID

Use the :not selector:

div:not(#bar){    color:red;}

<div>foo</div><div id="bar">bar</div>

Apply style to all elements except that are in specific div

It's not possible to do that using css (with todays browsers anyway).

But you can do it in reverse:

input[type="text"], input[type="password"] {
  border: 1px solid #ccc;
  padding: 1px;
  color: #444; 
  min-width: 70px;
}

#mydiv input[type="text"], #mydiv input[type="password"] {
  border: none;
  padding: 0px;
  color: inherit;
  min-wdith: 0px;
}

You apply to the styles to everything, then add reversing styles all the ones inside the special div.

Apply CSS rule to all elements inside?

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.

Apply CSS rules to a nested class inside a div

You use

#main_text .title {
  /* Properties */
}

If you just put a space between the selectors, styles will apply to all children (and children of children) of the first. So in this case, any child element of #main_text with the class name title. If you use > instead of a space, it will only select the direct child of the element, and not children of children, e.g.:

#main_text > .title {
  /* Properties */
}

Either will work in this case, but the first is more typically used.

---

Related Topics