Solved

CSS Advanced Selector - http://codepen.io/anon/pen/uhFtD

Posted on 2014-10-10
13
184 Views
Last Modified: 2014-10-12
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...
0
Comment
Question by:dvine_valentino
  • 6
  • 3
  • 3
13 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40373139
Nop, this is not possible.

You'll need to use javascript for that.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40373153
Here's an example using jQuery:
http://jsfiddle.net/AlexCode/v7og2b6n/
<ul>
    <li style="display: none;">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li style="display: none;">Item 5</li>
</ul>

Open in new window

$('ul li:visible:first').css('color','red');
$('ul li:visible:last').css('color','blue');

Open in new window


In your case it should be something like:
$('.row-fluid .section-box:visible:first').css('margin-top','5px');
$('.row-fluid .section-box:visible:last').css('margin-bottom','5px');

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40373709
Why are you using Bootstrap 2 - it's obsolete.

The CSS psuedo class is :first-child and :last-child

But I'm not sure what sections you are trying to apply it to - unless the markup is static where you can target based on nth-child you may not be able to get away without adding extra markup.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40374134
As far as I understood, his problem is that sometimes the first and last items on the list aren't visible. :first-child and :last-child css selectors don't take that in consideration.

The only way I know to overcome this limitation is through Javascript.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40374166
Hmmm,
Had a closer look at the markup and it's not going to be possible with a simple set of classes.
I'm not going to bother writing up css for something that is just an example, so here I've only done a sample on the second section

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

.container-fluid .row-fluid:nth-child(2) .row-fluid:first-child .section-box:first-child{
background:green
}
.container-fluid .row-fluid:nth-child(2) .row-fluid:last-child .section-box:last-child{
background:green
}

Open in new window

0
 

Author Comment

by:dvine_valentino
ID: 40374184
Hi Guys,

Alexandre, firstly thank you so much for your reply and secondly I was extremely tired before I wrote this so it probably did not make a bunch of sense. I am not exactly sure if that is the solution I am looking for however.

The section-box will always appear (it does not have a visible property), it will never always be in the first row or last row of the parent container. So there will be rows before the section-box row appears. .section-box will always appear in an entire row of columns and not just individually as the example provided. I want to target the entire row of .section-box when it appears the first time with additional top padding and likewise with its last instance in an entire row.

If you refer to the codepen layout I originally provided, you will see that every time .section-box appears in a row for the first time and every time .section-box appears the last time in a row I want to target those elements with another selector. I am starting to think pure css will not cut it here and obviously js will likely be involved.

Gary, thank you for your response. I understand that it is an older framework, but hubspot being the management system, I have no control over, and so I am working with what has been provided as the host in this instance.

Again, I want to target section-box div in an entire row every time (columns amount will vary) it appears in a new parent container. I might have 4 rows of section-box each with 5 columns. So I would need to target the first 5 and the last 5 leaving the middle 10 inheriting the default style.

Please see the codepen update showing all the boxes marked green that need to be targeted. If it appears once I will need it to apply the style to top and bottom in that single row instance. (I’ve only created additional class of green for demonstration purposes to show which boxes I need to target – just to clarify it further.

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

Thanks :)
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 58

Expert Comment

by:Gary
ID: 40374197
This is just for the last section, the others are easy following the same logic since you are highlighting all boxes

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

.container-fluid > .row-fluid:last-child .row-fluid:nth-child(3) .section-box {
background:blue !important
}

.container-fluid > .row-fluid:last-child .row-fluid:nth-child(6) .section-box {
background:blue !important
}

Open in new window

0
 

Author Comment

by:dvine_valentino
ID: 40374206
Gary, again I only created an additional class and applied it because you were unable to understand my confusing gibberish. Again, the requirement was to not add additional classes to each section-box where they appear any time for the first or last time in a row.

I do not want to target the specific nth-child because the layouts will always vary and those set of rules are very specific. I need the flexibility of having a large array of layouts, but always specifically targeting the first row of section-box and last row of section-box on any layout. I do not want to have to write the logic for every instance where these boxes do occur, as it will become confusing and it will overwrite itself in every instance without the correct logic.

I think Pure CSS will not cut it here.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40374223
No, in that case CSS will not work and neither will Javascript
0
 
LVL 58

Expert Comment

by:Gary
ID: 40374233
Well I suppose you could write some crazy dom traversal code in jQuery
0
 

Author Comment

by:dvine_valentino
ID: 40375676
I've requested that this question be deleted for the following reason:

There is no solution to the question, due to the limitation of the current language standards.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40375677
Sometimes the answer is it cannot be done and that is a perfectly valid answer.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now