CODEWITHSUNDEEP
csscss-selectors
SaidbakR
SaidbakR

Reputation: 13544

CSS selector for label without child elements

First of all the solution in that question: CSS selector to bold only labels without child elements does not solve my issue.

I have labels with text only and others with text and child input, select and textarea form's elements.

i.e:

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

        </label>

and other like:

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

I need to set white-space: nowrap to labels that has no child HTML elements only and as the above question answers stated, I tried the following:

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

However, it does not work.

Upvotes: 2

Views: 7433

Answers (3)

cjl750
cjl750

Reputation: 4629

The option to add a class has already been suggested by Fabio Pontes and is a good one, but if you don't want to add classes, here are a couple options.

The first thing you could do is modify your markup to wrap each label in a div and then leverage the :only-child pseudo selector. In order for this to work, you'll have to include the select element as a sibling of the label, rather than as a child of it.

.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>

Another option which may not require modifying your makup at all is to use an attribute selector. Perhaps you're already using an attribute for all these childless labels. The example HTML in your question suggests you may be.

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>

Upvotes: 1

Julio Feferman
Julio Feferman

Reputation: 2676

AFAIK there is no solution using CSS selectors. The solution proposed by @FabioPontes to control via an additional class name would be the most straight-forward.

Following is a javascript solution that verifies for an element's child nodes and applies a white-space:nowrap if (1) there is only one child node and (2) this node is of type text. Please view node types.

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>

Upvotes: 1

faabiopontes
faabiopontes

Reputation: 106

One solution would be adding a class to the element and using CSS to format it accordingly.

label.empty { white-space: nowrap; }

Link to the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

The other comment points to using :empty but in your case the <label> contains some text and doesn't apply as empty

Upvotes: 3

Related Questions