CODEWITHSUNDEEP
csscss-selectors
mjgirl
mjgirl

Reputation: 1234

Overlapping selectors in css

In my html page, I have div with id footer. Inside of that are couple of other divs, and last one of them has p-tag inside. How do I apply css style for that p?

#footer div p {
    background-color: #000;
}

#footer div {
    float: left;
    width: 23%;
    border-left: solid 1px;
    margin: 0;
    padding-left: 5px;
}

The first one does not seem to overwrite the second, which works fine. Could someone give me hint where to find information especially about the order of css selectors?

Upvotes: 1

Views: 384

Answers (2)

lukeocom
lukeocom

Reputation: 3243

You can use the :last-child selector to target the last div and its containing <p> tags.

footer div:last-child p{color:#f00;}

Here is an example fiddle - http://jsfiddle.net/vuGpt/

And here is some further reading - http://www.w3schools.com/cssref/css_selectors.asp

There's no real order to CSS selectors, except the order you create. The styles you define will be overridden if you select the same element later in your css. You just have to be aware of how you are selecting your elemnts. A general selector will be overridden by a more specific selector. For example if you defined the following

p{color:#0f0;}

Then this selector will be overridden by your more direct selector as defined above. To overcome this, you can add !important to your rules. That way you can be reasonably sure that that style will be applied regardless of it being overridden later. Unless you accidently use !important again. It can become a mess quite quickly and with well written CSS you chould be able to avoid using !important at all...

Your resulting CSS for the above would become: 

footer div:last-child p{color:#f00 !important;}

Hope this helps...

Upvotes: 1

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Reputation: 2804

Your CSS is fine. I would suggest checking the structure of your HTML. From the CSS you provided the HTML should look as below:

    <div id="footer">
        <div></div>     
        <div>
            <p>My paragraph</p>
        </div>
    </div>

I have tested this and all appears kosher. See fiddle.

Upvotes: 0

Related Questions