Styling a nested class

[Bill]

NEWB here – so go easy on me :) and if I’m doing this wrong please correct me!

Read through – https://css-tricks.com/child-and-sibling-selectors/ but I think I’m missing something.

Here’s what I’m looking to do…

Have a container div within my footer, have 3 nested divs within the container, div 1 is static and contains text, div 2 & 3 are dynamic – I need to add padding to the top of div 2 but not to the top of div 3 – both 2 & 3 have the same class.

div id=”footer” class=”…”
div class=”…”

div class=”pf1″ Still not working? /div
div class=”pf2″ dynamic text ** /div
div class=”pf2″ **dynamic text/div
/div
/div

[Paulie_D]

You could target it with

.pf1 + .pf2 {
padding-top: xx;
}

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

That should work..right?

If not, could you make a Codepen we could play with?

[Bill]

Hey Paulie – tried that but it targets both (add space to top of both .pf2’s)

Here is the Codepen – http://codepen.io/anon/pen/nbcav (never used codepen before so i hope i didn’t screw it up)

[paulob]

Hi,

No it only targets pf2. You were adding 50px padding to the top and bottom of pf2.

Change it to top padding only:

#footer .pf1 + .pf2{
   padding:50px 0 0;
  background:red;/* for testing */
}

[Bill]

DOH!!! That’s what i get for trying to over-think things!!!

Thanks for your help! (Merry Christmas!)

[Author]

Posts