please help

Hello there,

I have this rule:

.class1 {padding-bottom: 1em;}

now I want to use <p> element under class1 attribute in a way that the declaration value (1em) of the class1 selector changes to (0.5em).

Example:

<div class="class1">

<p>
text content
</p>

<p>
text content
</p>

<p>
text content
</p>

<div>

Now I want padding-bottom of <div> to become 0.5em instead of 1em when the code ends with </p>, without affecting the margins between the other <p> elements.

Hope you got what I mean

 

I would... lose the padding on the DIV, use padding instead of margins on P (so as to have no collapse issues), then use a negative margin on the bottom of the div equal to the bottom padding on the P minus 0.5em.

As a rule of thumb I kill margins on P and use padding instead. If you want 0.5em all-around and 1em between P, padding:0.5em; is much cleaner than playing any margin tricks/games... or just set padding on the bottom only which is what I do on 99% of my pages. padding:0 0 1em; is often far easier to deal with than keeping track of margin collapse.

Are you using the defaults for P, or are you using custom spacing? If I could see a bit more of your CSS I could probably dial in a solution better.

 

Just add another class to only affect paragraph elements within that class, so:
.class1 {padding-bottom: 1em;}
p.class1 {padding-bottom: .5em;}

Now everything in the class that is in paragraph tags will have a padding of .5, everything else will have a padding of .1.
I believe that's what your asking.