CODEWITHSUNDEEP
csscss-selectors
Parijat Kalia
Parijat Kalia

Reputation: 5095

Overriding a CSS rule for p tag fails

Here is the markup that I have

<div class="sign-in ">
<form> 
<fieldset>
<p class="note">
Note
</p>
</div>

The CSS rule that one of my stylesheet has is this : 

.sign-in p{
margin: 5px 80px;
}

I need this style rule to be overwritten for p tags that have a note class along with that.

SO I apply this style rule

.sign-in .note p{
margin:0px;
}.

However, the original style rule still sustains itself instead of being overridden by the new style rule that I have applied.

Here is this in js fiddle: http://jsfiddle.net/fNepf/

What am I doing wrong?

Upvotes: 0

Views: 157

Answers (3)

Adrift
Adrift

Reputation: 59829

Your selector should instead be:

.sign-in p.note {
margin: 0px;
}

As the selector you posted is looking for a <p> that is a descendant of an element with class .note instead of a <p> element with the class .note

http://jsfiddle.net/fNepf/2/

If you have two classes on the <p> you could use .sign-in p.note.test {}:

http://jsfiddle.net/fNepf/3/

Upvotes: 1

Nick R
Nick R

Reputation: 7794

Your selector is wrong,

use:

.sign-in .note{
    margin:0px;
}

Upvotes: 2

dsgriffin
dsgriffin

Reputation: 68616

Your selector should be:

.sign-in p.note {
   margin:0px;
}

You were selecting all <p>'s which are descendants of the class .note.

jsFiddle.

Upvotes: 1

Related Questions