loading error

Question

I have a line of liquid in which I need to show and hide gaps depending on how the user wants to see the page (single view, split view). Using jQuery, I show / hide gaps and also 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 template is not configured 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 had a problem with the following flexible style sheet rule:

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

This rule only removes the left-margin fields in span classes if they are the first child of the parent. Well, in the case of viewing MySpan2, my div is the second child of the parent (although it is the first with the span * class. As a result, the left margin is still applied. Is there a css pseudo selector that will do what I expect? I want to select only the first matching element, whether it is the first parent of the parent, I can fix it with jQuery and some additional css, but I was hoping for a more global resolution.

Answer 1

Updated Answer

See if this solution works for you:

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

It is clean, and I think it would be easy to incorporate into what you have already done.

Important bits are:

• add a .marker class to each span inside a line-fluid

• when you want to hide the div, use jQuery to change the class from the marker to hide. Hide is the default Bootstrap class that does the same as inline styles. Performing this method makes it easy to switch back and forth between different views by simply changing the class name

Here it is:)

The rest is done 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%; } 

jsfiddle contains more detailed information and settings that allow you to distinguish between the width of the left margin in different viewports.

For a full explanation of how CSS selects everything except the first range of the .marker class, see @BoltClock post here

Hope this helps