CSS selector to bold only labels without child elements

Question

I have a basic html form where label tags are used to define field names and where label tags are used around checkboxes so that a user clicking on the text next to a checkbox also selects the checkbox.

<label>Valid?</label>
<label>
    <input type="checkbox" />
    Yes
</label>

What CSS is the best practice so that my field name is bold ("Valid?"), but my checkbox descriptor is not bold?

I have tried several variations adding different :not and :empty, but I'm not hitting the right selector - either both are bold or neither are bold. I know my :empty isn't working since the text element messes that up, but there must be a simple way to only bold labels that have only text elements.

label:empty {
    font-weight: bold;
}

JS Fiddle: http://jsfiddle.net/z77tq8bs/

Answer 1

You can use the next sibling selector, like this:

label {
   font-weight: bold;
}

label + label { 
    font-weight: normal
}

Check the fiddle: https://jsfiddle.net/8cLuhznb/