4

I've got a fluid row in which I need to show and hide spans depending on how the user wants to see the page (single-view, split-view). Using jQuery, I show/hide spans as well as change their classes:

MySpan1 View:

<div class="row-fluid">
    <div id="myspan1" class="span12"></div>
    <div id="myspan2" style="display:none;"></div>
</div>

MySpan2 View (this one doesn't layout correctly):

<div class="row-fluid">
    <div id="myspan1" style="display:none;"></div>
    <div id="myspan2" class="span12"></div>
</div>

Split View:

<div class="row-fluid">
    <div id="myspan1" class="span6"></div>
    <div id="myspan2" class="span6"></div>
</div>

I'm having a problem with the following responsive stylesheet rule:

.row-fluid [class*="span"]:first-child
{
    margin-left: 0;
}

This rule is only removing left-margin on span classes if they are the first child of the parent. Well, in the case of MySpan2 view, my div is the second child of the parent (even though it's the first one with a span* class. As a result, a left margin is still being applied. Is there a css pseudo selector that will do what I'm expecting? I want to select only the first element of the matching set, not whether or not it is the first child of the parent. I can fix this using jQuery and some additional css, but I was hoping for a more global resolution.

Jason Butera
  • 2,376
  • 3
  • 29
  • 46
  • 1
    See my answer to http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class – BoltClock May 03 '13 at 21:36

1 Answers1

2

Updated Answer

See if this solution would work for you:

http://jsfiddle.net/panchroma/R7zf6/

It's clean and I think would be easy to incorporate into what you've already done.

The important bits are:

  • add a .marker class to every span inside a row-fluid

  • when you want to hide a div, use jQuery to change the class from marker to hide . Hide is a default Bootstrap class which does the same as the inline styes you are using. Doing it this way makes it easy to toggle back and fourth between different views by simply changeing the class name

Thats' it :)

The rest is accomplished using CSS: 

/* by default, remove left-hand margin on all spans of class .marker */

.row-fluid > [class*="span"].marker{  
margin-left:0;
}


/* restore default left hand margin on all but the first span of class .marker */

.row-fluid > [class*="span"].marker ~ [class*="span"].marker{
margin-left: 2.127659574468085%;
}

The jsfiddle has more details, and adjustments to allow for different left margin widths at different viewports.

For a full explanation of how the CSS is selecting all but the first span of class .marker, see the post by @BoltClock here

Hope this helps

Community
  • 1
  • 1
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • Sure, I can easily do this as well globally with ".row-fluid .span12 { margin-left: 0; }". That works in this case. Unfortunately, there may be times where I'll have three .span4 divs in which case I may be hiding the first one and turning the others to .span6. The true global solution is for a css pseudo selector called :first (like in jQuery) which doesn't exist. – Jason Butera May 03 '13 at 21:11
  • To clarify, css does have first selectors. The challenge is that when you use display:none, the div isn't displayed but it still exists in the page HTML. You can verfiy this by checking the page source in my jsfiddle above. – David Taiaroa May 03 '13 at 22:16
  • 1
    No, CSS does not have a selector like jQuery's `:first`. It does have `:first-child` and `:first-of-type`, but they don't do the same thing. – BoltClock May 05 '13 at 03:28