- This topic is empty.
October 10, 2014 at 6:32 am #185962dvineParticipant
I am trying to target .section-box when it’s appears for the first time and last time (in a row) within it’s parent container. I am using the fluid grid bootstrap 2.3.2.
A requirement to target these without creation of additional classes or wrapping them in within another container whenever they appear in .row-fluid.
I am trying to add a margin-top:Xpx to the first row and a margin-bottom:Xpx to the last row on .section-box but not in between as it will use a pre-defined margin (in the example it has a 5px margin top and bottom). :first-child and :last-child will not cut it as they will not always be the first children or last when they appear as displayed in the example here:
Many Thanks…October 10, 2014 at 8:25 am #185975SenffParticipant
first-child and last-child won’t do, since they won’t always be the first or last children as you say.
nth-of-type won’t do, since there may be other divs (or whatever type you’re using) before or after it.
There are no other “pure CSS” solutions like these yet.
What you MAY want to check into, is clever use of margins and paddings. Let’s say you want a space of 5 pixels between each section box. You’ll also want a space of 20 pixels at the top of the first one, and a space of 40 pixels at the bottom of the last one.
You could accomplish that by:
– giving each section box a top margin of 0 and bottom margin of 5 pixels
– give the container a top padding of 20 pixels
– give the container a bottom padding of 35 pixels
Would that be an option?October 10, 2014 at 3:28 pm #186000dvineParticipant
Thanks for the response. :)
Is a updated pen showing which boxes I need to target specifically.
All boxes marked green need additional mark-up but without wrapping or the addition of styles to those containers.
Like you said, it might very well just be a limitation of the current css standard. I might need to look into a js solution, or add additional classes. Anyhow, I thought I was just having issues figuring this one out!
If only there was a more programmatic approach to this css logic :)
Looks like I might have to use a work-around in this instance. Appreciate the help buddy!
Have a great day/night everywhere you are.
- The forum ‘CSS’ is closed to new topics and replies.