How do i apply css to the inner level of an element?

Suppose there are number of div tags and if there are an element at the innermost level then how do I access that one or declare css for that element?

<div class="...">
     <div class="...">
          <div class="...">
               .....
                   <div class="...">
                           <p>eleme开发者_如何学Cnt</p>
                   </div>
               .....
          </div>
     </div>
</div> 

How do I access the element <p> or set the background image for it in a separate css file?

It depends on how specific you want the style to be, say if you have:

<div class="page">
  <div class="content">
    <div class="some-container">
      <p class="description">Lorem Ipsum</p>
    </div>
  </div>
</div>

You can style the <p> as generic/specific as you want:

p
{
   color:red; /* Affects all p */
}

p.description
{
   color:blue; /* Affects all p with class description */
}

.some-container p
{
   color:black; /* Affects all p that is a descendant of an element with some-container class */

}
.page .content .some-container p.description
{
    color:white; /* You get the idea */
}

Easiest way may be defining a css class and using that class for element.

.myCssClass{
 // --- css properties.
}

<div>
    <div>
        <div>
           <div>
               <div>
                  <input class="myCssClas" />
               </div>
           </div>
        </div>
   </div>
</div>

A space between CSS selectors allows you to reference descendant elements, no matter how far down the tree they are.

So if your top-level <div> has a class of topdiv, you can access all the <p> elements beneath it in the tree with a simple CSS selector like this:

.topdiv p {
    .....
}

If you need to be more specific, you can use a class from one of the divs further down the tree, either instead of the .topdiv reference, or alongside it:

.topdiv .middlediv p {
    .....
}

will reference all the <p> elements contained within a middlediv element that is itself contained within a topdiv element.

You can continue this pattern to make is as specific as you need to, in order to be sure you only reference the elements you want.

If you need to get more specific than that, you can replace the space separator with an angle bracket >. This specifies that the next item in the selector is an immediate child element of the previous one, rather than being anywhere down the tree.

There are a number of other CSS selectors that might be handy to know, but those are the most common ones in use, and the most likely to help in your situation.

You really only need to know the class for the element above the <p>, so

<div class="...">
     <div class="...">
          <div class="...">
               .....
                   <div class="something">
                           <p>element</p>
                   </div>
               .....
          </div>
     </div>
</div>

The CSS would then be

.something p{//background img styles//}

You could also do this

div div div div p{}

But only if this was the exact structure of the page (no elements in between) and it was not duplicated somewhere else.

Best, though, is to give the <p> a class or id (if it is unique) and style from there

<div class="...">
     <div class="...">
          <div class="...">
               .....
                   <div class="...">
                           <p class="paraWithBG">element</p>
                   </div>
               .....
          </div>
     </div>
</div> 

Style as

.paraWithBG{//background styles//}

<style>

.foo p
{
    background : yellow;
}
</style>
 <div class="foo">
     <div class="...">
          <div class="...">
               .....
                   <div class="...">
                           <p>element</p>
                   </div>
               .....
          </div>
     </div>
</div> 

try this. it works for me !!

Part of the problem is that there could be 1 or many sub elements that fit your description, so there does not exist just one "innermost level". If you want all such "leaf" elements, you might try using something like jQuery:

function tagLeaves() { 
  if ($(this).children().size() == 0) {
    $(this).addClass("leaf");
  } else {
    $(this).children().each(tagLeaves);
  }
}
$(function () {
  $("#firstDiv").each(tagLeaves);
});

You could then define a .leaf set of styles to apply to these elements.

Try this, I did it and here it works

$(function(){
    var t = $('#stefanz'),
        total = $('div',t).size() - 1 ;

    $('div',t).eq(total).children().css({
        'background-color' : '#000',
        'color' : '#fff',
        'padding' : '5px',
        'display' : 'inline-block'
    });

});

and alos you have the html code here

<div id="stefanz">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <p>stefanz</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I tested in few ways and it works good. I'm waiting for your feedback