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

Question

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>element</p>
                   </div>
               .....
          </div>
     </div>
</div> 

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

Answer 1

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 */
}