CSS Nesting Problem - Reading container information

This problem comes up from time to time when I work with CSS, here is the issue I face.

My current code is:

<div class="entry">
  <div>
    <blockquote><p>quoted text</p></blockquote>
  </div>
</div>

In my css, I have:

.entry p {margin: 10px}
blockquote {stuff}
blockquote p {margin: 0px}

I would think the paragr开发者_StackOverflowaph inside the blockquote would read from 'blockquote p', but instead it takes the margin: 10px from '.entry p'.

Why does it read from 'entry p' instead of 'blockquote p'?

While usually in CSS the last declaration wins, that is only true if they both share the same specificity weight. However, if the 2 selectors are not of equal specificity, the lower one will be overridden even if it comes later in the code.

Since a classname selector has a higher specificity value than a tagname selector, your second declaration is being overridden.

To give the later one a higher specificity, you'll have to further qualify it:

.entry blockquote p {margin: 0px}

Or use the dreaded !important:

blockquote p { margin: 0px !important }

Use the second method only when the first one fails (In your example, the first one will do just fine).

This has to do with specificity.

That is to say .entry p is higher than blockquote p

Changing it to the following would solve it (although there are other solutions)

.entry blockquote p

You're specifying a class for .entry, which is specific - not global.

Have you tried:

.entry blockquote p
{
    margin: 0px;
}

It's not a matter of document order for CSS, but rather of selector specificity. See Calculating a selector's specificity for more details.

When we declare a class, it would get the first preference over the CSS defined for tags.