要素の前にプレーンテキストがあるかどうかをどのように検出しますか？

私はフォームの物語様式を含むいくつかのHTML DIV要素を持っています。例えば：要素の前にプレーンテキストがあるかどうかをどのように検出しますか？

<div class="narrative"> 
    My name is <input type="text"> and I am <input type="text"> years old. 
</div>

は最初<input>要素の前にプレーンテキストがある場合、私は左マージンを追加できるようにCSSを検出する方法はありますか？そうでない場合は、最初の入力をクラス分けすることなく、またはスパンにプレーンテキストをラップすることなく、これを行うための方法を提案しますか？

それは常にプレーンテキストに先行されません。

<div class="narrative"> 
    <input type="text"> is <input type="text"> years old. 
</div>

CSSはHTMLにスタイルを適用します。それは何も "検出"できません。 –

CSSがテキストノードを検出しても、2つ目のスニペットの空白がプレーンテキストノードを構成するため、2つのスニペットに違いはありません。それではまた、私はちょうどニンピクである。 – BoltClock

@Diodeus - 私はそれを理解しています。私の質問は意味的に間違っています。 –

CSSは要素内の個々のテキストノードではなく、要素のみを選択できます。これは、DOMスクリプティングとCSSを通してやるべきことです。

2012-03-02 20:24:21

私は実際にこの特定のユースケースでJSにアクセスすることはできないので、CSSのみの修正が必要です。私にとっては、スパンタグにプレーンテキストをラップする必要があるかもしれないということです。 –

ああ。その場合、はい、テキストノードを 'span'や他の意味のないインライン要素にラップする必要があります。この場合、 'span'はおそらくあなたの最善の策です。運が良かった！私はあなたのマークアップの仕事を羨ましくはありません。 –

CSSはプレゼンテーションの目的のために（理想的には、明確にすべての場合に尊敬ではない）です。 input要素に余白を追加する必要があるのはJavaScriptです。

2012-03-02 20:12:56

残念ながら、入力の前にテキストがあるかどうかを判断するCSS方法はありません。あなたはそれぞれの物語のブロックの最初の入力をターゲットにfirst-child疑似クラスを使用することができます。

.narrative input:first-child { 
    margin-left: 20px; 
}

はここan exampleです。

2012-03-02 20:23:57 Pat

残念ながら、上記の2番目の例の場合はうまくいきません。先行するテキストがない場合は入力にマージンを追加し、行頭にそれをスローします。 –

答えて