要素のない最初/最後の子ですか？

Question

は

が適切な言葉はので、ここで説明するのが見つかりませんコードの例です：

<button class="btn btn-default"> 
    <i class="glyphicon glyphicon-alert"></i> 
    <span>button</span> 
</button> 
<button class="btn btn-default"> 
    <span>button</span> 
    <i class="glyphicon glyphicon-alert"></i> 
</button> 

つのボタン、前面にglyphiconと1、エンド

でglyphiconと1が今の私たちは追加したいとしましょう単語とアイコンの間のギャップのより：http://codepen.io/anon/pen/wzxRPw

マイQUES：

.btn { 
    > .glyphicon:first-child { 
     margin-right: 15px; 
    } 
    > .glyphicon:last-child { 
     margin-left: 15px; 
    } 
} 

はそうのようにうまく動作しますこの言葉の周りに余分なスパンがなければ、これはどのようにして行われますか？

私はスパンを削除する場合は、glyphiconが唯一の要素であるので、それは両方の最初と最後の

編集として扱われます。注：問題の私の意図は、これはどのように/可能かどうかを確認することです余分なクラスを追加することなく、スパンタグなしで済ませました。

スパンを追加したりクラスを追加するのが理想的な解決策かもしれないと私は知っていたCSSでこれを行う方法があると思っただけです（まだ学習中です）

Answer 1

spanタグの代わりに、glyphiconのためのそれぞれの余白」を設定することができる唯一のspanタグを削除した場合、あなたがglyphiconとスパン

間 を追加することができた場合本当に排除する必要のないコードを排除しようとしています（これは私の意見です）。あなたが何をしていても、spanタグなどでテキストをラップしないと、実際の<button>の子要素が1つしか存在しません。つまり、明示的にクラスやインラインスタイルを設定しなければ、その要素以外のものをターゲットにすることはできません。 spanタグは優れたソリューションですが、あなたがそれらを取り除くに主張すれば、あなたは他のオプション（ただし、私はspanタグがベストだと思う）のカップルがあります：

1. が定義CSSクラスを作成しますマージンオフセットを設定し、それをボタンに設定します。したがって、.margin-leftのようなクラスをもう1つに設定すると、

2. グリフコンごとにインラインスタイルを書くことができます。

上記のように、私はあなたのオプションの最適な解決策を持っていると思います。あなたができることが他にはないと私は思います。

<button class="btn btn-default icon-on-left"> 
    <i class="glyphicon glyphicon-alert"></i> 
    button 
</button> 
<button class="btn btn-default icon-on-right"> 
    button 
    <i class="glyphicon glyphicon-alert"></i> 
</button> 

し、適切なスタイルを：

Answer 2

私はあなたが結果として得たいものを明確にしていませんが、あなたに必要なものかどうかを判断する必要があるいくつかのアイデアをまだ教えています。

1. あなたは、あなたが私はあなたのように感じる

Answer 3

スパンのない唯一の合理的な解決策は、クラスを追加することです。しかし、これは保守性の問題を引き起こします。ボタンの内容を変更しながら、クラスを同期して変更する必要があります。