Sélecteur CSS pour l'étiquette sans éléments enfants

Tout d'abord, la solution dans cette question: CSS selector to bold only labels without child elements ne résout pas mon problème.Sélecteur CSS pour l'étiquette sans éléments enfants

J'ai des étiquettes avec le texte seulement et d'autres avec l'entrée de texte et d'enfant, choisissent et éléments de forme de textarea.

-à-dire:

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

     </label>

et d'autres comme:

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

Je dois mettre white-space: nowrap aux étiquettes qui n'a pas d'éléments HTML enfant seulement et que les réponses aux questions ci-dessus indiqué, j'ai essayé ce qui suit :

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

Cependant, cela ne fonctionne pas.

Source

2017-09-21 SaidbakR

Je suis assez sûr qu'il n'y a pas moyen facile de le faire. –

Pouvez-vous modifier le balisage? – hungerstar

Je ne pense pas qu'il existe un moyen de le faire avec un sélecteur. Une solution js serait-elle acceptable? – jfeferman

Une solution serait d'ajouter une classe à l'élément et d'utiliser CSS pour le formater en conséquence.

label.empty { white-space: nowrap; }

Lien vers la documentation:https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

Les autres points de commentaire à l'utilisation :empty mais dans votre cas, le <label> contient du texte et ne s'applique pas vide

Source

2017-09-21 20:19:03 faabiopontes

AFAIK il n'est pas une solution utilisant des sélecteurs CSS. La solution proposée par @FabioPontes pour contrôler via un nom de classe supplémentaire serait la plus directe. Voici une solution javascript qui vérifie les nœuds enfants d'un élément et applique un white-space:nowrap si (1) il n'y a qu'un seul nœud enfant et (2) ce nœud est de type texte. S'il vous plaît voir 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>

Source

2017-09-21 20:34:08 jfeferman

La possibilité d'ajouter une classe a déjà été suggéré par Fabio Pontes et est un bon, mais si vous ne voulez pas ajouter des classes, voici quelques options.

La première chose que vous pourriez faire est de modifier votre balisage pour envelopper chaque label dans un div puis de tirer parti du pseudo-sélecteur :only-child. Pour que cela fonctionne, vous devez inclure l'élément select en tant que frère du label, plutôt qu'en tant qu'enfant.

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

Une autre option qui peut ne pas nécessiter de modifier votre makup tout est d'utiliser un attribute selector. Peut-être que vous utilisez déjà un attribut pour toutes ces étiquettes sans enfant. L'exemple HTML dans votre question suggère que vous pourriez l'être.

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>

Source

2017-09-21 21:20:23 cjl750

Sélecteur CSS pour l'étiquette sans éléments enfants

Répondre

Questions connexes