css - ブートストラップ対応の行流体の問題

Question

ユーザーがページをどのように表示したいか (単一ビュー、分割ビュー) に応じて、スパンを表示および非表示にする必要がある流動的な行があります。jQuery を使用して、スパンを表示/非表示にし、クラスを変更します。

MySpan1 ビュー:

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

MySpan2 ビュー (これは正しくレイアウトされていません):

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

分割ビュー:

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

次のレスポンシブ スタイルシート ルールに問題があります。

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

このルールは、スパン クラスが親の最初の子である場合にのみ、スパン クラスの左マージンを削除します。さて、MySpan2 ビューの場合、私の div は親の 2 番目の子です (span* クラスを持つ最初の子ですが。その結果、左マージンがまだ適用されています。css 疑似セレクターはありますか?親の最初の子であるかどうかではなく、一致するセットの最初の要素のみを選択したい. jQuery と追加の css を使用してこれを修正できますが、よりグローバルな解決策。