0

I have this html for a page that will be filled according to what facilities a hotel has. Obviously, some hotels have more than others but this is a template so I have to cater for all meaning I have to have more containing divs than is needed sometimes.

<div class="col-md-6 color-blue py-4 d-flex align-items-center flex-wrap facilities">
    <div class="w-50 d-flex"><i class="material-icons align-middle">ac_unit</i> Air Conditioning</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">accessible</i> Disabled Access</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">restaurant</i> Restaurant</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">pool</i> Pool</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">child_care</i> Kids Activities</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">access_time</i> 24 Hour Reception</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">fitness_center</i> Gym</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">wifi</i> Internet</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">person_outline</i> Concierge</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">spa</i> Sauna</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle">room_service</i> Room Service</div>
    <div class="w-50 d-flex"><i class="material-icons align-middle"></i> </div>
    <div class="w-50 d-flex"><i class="material-icons align-middle"></i> </div>
    <div class="w-50 d-flex"><i class="material-icons align-middle"></i> </div>
</div>

So the pseudo code would be: If the i element is :empty, the parent div will display: none.

I'm having trouble doing this with Less and can't seem to get it working. Any help would be appreciated.

seven-phases-max
  • 11,491
  • 1
  • 41
  • 57
user7723458
  • 21
  • 1
  • 4
  • 1
    And, where is the Less code you are talking about ? Plus, as far as i know, you cannot move up the DOM tree with CSS. With `:empty` you select an empty element, you can select descendants of that element but not ancestors – Mihai T Jun 13 '18 at 08:49
  • 1
    Surely if the `i` is empty it won't show anyway and thus the div would collapse? – Paulie_D Jun 13 '18 at 08:55

0 Answers0