子要素のないラベルのCSSセレクタ

Question

まず、その質問の解決策：CSS selector to bold only labels without child elementsは私の問題を解決しません。

私は、テキストのみと、テキスト入力と子入力、selectとtextareaフォームの要素を持つラベルを持っています。

すなわち：

<label class="control-label">State 
      <select name="status" id="status" class="form-control"> 
       <option value="">Choose..</option> 
           ... 
          </select> 

     </label> 

およびその他のような：

<label for="defect" class="control-label">Error</label> 

私は上記の質問の答えが述べたように、私が試した、次の子のHTML要素を持っていないラベルに white-space: nowrapを設定する必要が

：

label{ 
    white-space: nowrap; /* Label without HTML*/ 
} 
label + label { 
    white-space: normal; /* Label with HTML */ 
} 

ただし、動作しません。

Answer 1

解決策の1つは、要素にクラスを追加し、それに応じてCSSを使用してフォーマットすることです。

label.empty { white-space: nowrap; }

ドキュメントへのリンク：https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

他のコメントポイント:emptyを使用するが、あなたのケースで<label>は、いくつかのテキストが含まれていて、そこのように空

Answer 2

私の知る限りは適用されません。 CSSセレクタを使用するソリューションはありません。 @FabioPontesが追加のクラス名で制御するために提案した解決策は、最も単純明快です。

次は、要素の子ノードを検証し、（1）子ノードが1つしかなく、（2）このノードがテキスト型の場合はwhite-space:nowrapを適用するjavascriptソリューションです。 をご覧ください。

var elements = document.getElementsByClassName("control-label"); 
 

 
for (i = 0; i < elements.length; i++) { 
 
    if (elements[i].childNodes.length == 1 && elements[i].childNodes[0].nodeType == 3) { 
 
    elements[i].style.whiteSpace = "nowrap"; 
 
    } 
 
}

<div> 
 

 
    <label class="control-label">State - we need a really long text to check if the white-space nowrap is actually working so lets place this text here. 
 
    <select name="status" id="status" class="form-control"> 
 
     <option value="">Choose..</option> 
 
    </select> 
 

 
    </label> 
 
</div> 
 

 
<div style="margin-top:20px;"> 
 

 
    <label for="defect" class="control-label">Error - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.</label> 
 
</div>

Answer 3

クラスを追加するオプションは、すでにここで、ファビオ・ポンテスによって提案と良いものですが、あなたはクラスを追加したくない場合はされているカップルのオプションがあります。

まず、labelをそれぞれdivにラップし、次に:only-child疑似セレクタを利用するようにマークアップを変更します。これを機能させるには、select要素を子要素ではなくの兄弟として含める必要があります。

.control-label-wrapper label:only-child { 
 
    white-space: nowrap; 
 
}

<div class="control-label-wrapper"> 
 
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label> 
 
    <select name="status" id="status" class="form-control"> 
 
    <option value="">Choose..</option> 
 
    </select> 
 
</div> 
 

 
<div class="control-label-wrapper"> 
 
    <label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label> 
 
</div>

すべてであなたのmakupを変更する必要はないかもしれない別のオプションはattribute selectorを使用することです。おそらく、これらの子なしのラベルにはすでに属性を使用しています。あなたの質問にあるHTMLの例は、あなたの可能性を示唆しています。

label[for="defect"] { 
 
    white-space: nowrap; 
 
}

<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis. 
 
    <select name="status" id="status" class="form-control"> 
 
    <option value="">Choose..</option> 
 
    </select> 
 
</label> 
 

 
<label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>