[Solved] Targeting – Advanced Selector

[dvine]

Hi,

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:

http://codepen.io/anon/pen/uhFtD

Many Thanks…

[Senff]

If you always want to target the first element with class section-box, AND the last element with class section-box, AND you know that sometimes there may be elements before or after that, you’ll probably have to use some JavaScript.

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?

[dvine]

Hi Senff,

Thanks for the response. :)

http://codepen.io/anon/pen/tvFHw

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.

[Author]

Posts