Hide bootstrap's .dropdown-backdrop, CSS only

Question

Is it possible to hide Bootstrap's .dropdown-backdrop element for a certain dropdown (not all on the page) by using CSS only?

I've determined that this is possible using Javascript, with JSFiddle here. However, I would like to accomplish this without using additional JS if possible.

<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
    <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
        First Dropdown &#x25BC;
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a class="a_dropdown_item" href="#business">Business</a></li>
        <li><a class="a_dropdown_item" href="#my-events">Event</a></li>
    </ul>
</div>

<!-- Second dropdown: yes backdrop -->
<div id="secondDropdown" class="dropdown">
    <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
        Second Dropdown &#x25BC;
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a class="a_dropdown_item" href="#business">Business</a></li>
        <li><a class="a_dropdown_item" href="#my-events">Event</a></li>
    </ul>
</div>

<script type="text/javascript">
    // Hide backdrop from #firstDropdown.
    // This can be done with JS as below. Can it be done with only CSS?
    $('#firstDropdown').on('show.bs.dropdown', function () {
      $(".dropdown-backdrop").hide();
    });
</script>

Answer 1

Found solution: .dropdown-backdrop is a descendant of its .dropdown, which can have a unique ID, so simply using display:none; in CSS works fine, as in:

#firstDropdown .dropdown-backdrop {
    display:none;
}

And then all other dropdowns (except #firstDropdown) will still have a backdrop as normal.

See JSFiddle updated.