- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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?
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)
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 */
}
DOH!!! That’s what i get for trying to over-think things!!!
Thanks for your help! (Merry Christmas!)