Applying CSS styles to all elements inside a DIV

Question

I would like to apply a CSS file to a concrete DIV in my page. This is the page structure:

...


        

Answer 1

If you're looking for a shortcut for writing out all of your selectors, then a CSS Preprocessor (Sass, LESS, Stylus, etc.) can do what you're looking for. However, the generated styles must be valid CSS.

Sass:

#applyCSS {
    .ui-bar-a {
       color: blue;
    }
    .ui-bar-a .ui-link-inherit {
       color: orange;
    }
    background: #CCC;
}

Generated CSS:

#applyCSS {
  background: #CCC;
}

#applyCSS .ui-bar-a {
  color: blue;
}

#applyCSS .ui-bar-a .ui-link-inherit {
  color: orange;
}

Answer 2

Alternate solution. Include your external CSS in your HTML file by

<link rel="stylesheet" href="css/applyCSS.css"/> 

inside the applyCSS.css:

   #applyCSS {
      /** Your Style**/
    }

Answer 3

#applyCSS > * {
  /* Your style */
}

Check this JSfiddle

It will style all children and grandchildren, but will exclude loosely flying text in the div itself and only target wrapped (by tags) content.

Answer 4

Write all class/id CSS as below. #applyCSS ID will be parent of all CSS code.

For example you add class .ui-bar-a in CSS for applying to your div:

#applyCSS .ui-bar-a  { font-size:11px; } /* This will be your CSS part */

Below is your HTML part:

<div id="applyCSS">
   <div class="ui-bar-a">testing</div>
</div>

Answer 5

I do not understand why it does not work for you, it works for me : http://jsfiddle.net/igorlaszlo/wcm1soma/1/

The HTML

<div id="pagina-page" data-role="page">
    <div id="applyCSS">
    <!--all the elements here must follow a concrete CSS rules-->
        <a class="ui-bar-a">This "a" element text should be red
            <span class="ui-link-inherit">This span text in "a" element should be red too</span>
        </a>      
    </div>
</div>

The CSS

#applyCSS * {color:red;display:block;margin:20px;}

Maybe you have some special rules that you did not share with us...

Answer 6

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?