1

I have a dynamic HTML structure and I want to apply a CSS rule only when exists one element that contains one specific class.

<div class="inline-container">
   <div class="form-element>
      <label class="paragraph">Some text</label>   
      <div class="select-wrapper">
         <select>
            <option value="1">1</option>
         </select>
      </div>
   </div>
   <input type="hidden">
   <input type="hidden">
</div>

When the inputs type are enabled their structure change to the same of "form-element" and of course with the same classes. I only want to apply styles when there are one enabled like in the code. The styles that I want to apply are for the label and for the select. I have tried using only-child or only-of-type but doesn't work fine for that case.

label:only-child {
    padding: 0% 29% 0% 0% !important;
}
div:only-child {
    select {
        padding: 0% 10% 0% 59% !important;
    }
}

The HTML cannot be modified only the CSS (.less file)

aknosis
  • 2,703
  • 16
  • 30
Mateo Hermosilla
  • 181
  • 10
  • 1
    Could you show example markup where you would want the selector to apply? – Danield Sep 06 '17 at 07:34
  • 1
    Related - I think - https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Paulie_D Sep 06 '17 at 09:38
  • Also - https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector – Paulie_D Sep 06 '17 at 09:39
  • Do you need to apply special styling to `label` and `select` elements inside the `div.form-element` if and only if it is the only `div` inside `.inline-container`? If so, selector like `.inline-container div:only-of-type label, .inline-container div:only-of-type select` should help. – Ilya Streltsyn Sep 06 '17 at 09:45
  • @IlyaStreltsyn it works but only for the label, for the select is applying the style if there are one or more enabled. We are more near to find the solution... :) thanks – Mateo Hermosilla Sep 06 '17 at 11:12

1 Answers1

1

You can try the below code, please note, the padding will not work for the select so can use appearance:none .

I'd placed the label below the select wrapper and used flex to move it up. 

label{
    padding: 0% 29% 0% 0%;
}
.select-wrapper + label{
   padding: 0% 0% 0% 0%;
}
div:only-child select{
   padding: 0% 10% 0% 59% !important;
   -webkit-appearance: none;
}

.form-element {
 display: -webkit-flex;
 display: -webkit-box;
 display: -moz-box;
 display: -moz-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-flow: column wrap;
 flex-flow: column wrap;
}
.paragraph {
 -webkit-box-ordinal-group: -1;
 -moz-box-ordinal-group: -1;
 -webkit-order: -1;
 -ms-flex-order: -1;
 order: -1;
}
<div class="inline-container">
   <div class="form-element">
      <div class="select-wrapper">
         <select>
            <option value="1">1</option>
         </select>
      </div>
      <label class="paragraph">Some text</label> 
   </div>
   <input type="hidden">
   <input type="hidden">
</div>
Awsme Sandy
  • 1,370
  • 6
  • 20