CODEWITHSUNDEEP
css
appu
appu

Reputation: 97

Understand Cascading in CSS

Hy,

I am new to CSS and trying to understand it. In the code below, how is the style interpreted/ read to understand it. Whether the style def would apply to list and ul elements under a div that uses the class "p220mid" or what how this works. Could you guys give sample.

.p220mid ul li
{
    background:transparent URL('images/bline.gif') repeat-x bottom;
    width:205px;
    height:28px;
    margin-left:4px;
    padding-left:4px;
    color:4c76a0;
}

Thanks, Appu.

Upvotes: 0

Views: 122

Answers (5)

Brad
Brad

Reputation: 15879

Because you have spaces defined between your style elements (.p220mid ul li) this means that any <li> descendant elements (i.e. nested beneath the class="p220mid" and a <ul> element, whether a direct child or a grandchild or grand-grandchild) it will have the style applied.

You should read up on CSS Selectors to have a better grasp of the syntax here

To clarify this example will apply the style

<div class="p220mid">
    <ul>
       <li>
         class style will be applied here
       <li>
    </ul>
</div>

and so will this example

<div class="p220mid">
    <div>
        <ul>
           <li>
                class style will also be applied here
           <li>
        </ul>
    </div>
</div>

Upvotes: 1

Marc Uberstein
Marc Uberstein

Reputation: 12541

Check my link http://jsfiddle.net/YyqYN/ (I have changed the background image url so that you can see more clearly)

It basically means that the style will only apply to the set of html that appears in .p220mid ul li.

Upvotes: 0

Anand Thangappan
Anand Thangappan

Reputation: 3106

CSS:

 .p220mid ul li { 
            background:transparent URL('images/bline.gif') repeat-x bottom; 
            width:205px; 
            height:28px; 
            margin-left:4px;
            padding-left:4px; 
            color:4c76a0; 
     }

HTML:

   <div class="p220mid ">
     <ul>
       <li>
         class style will be apply here
       <li>
     </ul>
    </div>

Upvotes: 0

user456814
user456814

Reputation:

The selector says "style all li elements that are descendants of all ul elements that are themselves descendants of all elements classed as .p220mid".

Upvotes: 2

shanethehat
shanethehat

Reputation: 15570

What you have there will target all the li elements in a ul inside all elements with a class of p220mid.

If you want to target all ul and all li elements in your div you want .p220mid ul, .p220mid ul li

Upvotes: 3

Related Questions