CSS Pseudo classes help - display none on certain labels

Question

I have the following HTML (auto generated by a CMS), and I want to use CSS to display:none; all labels below where I have commented <!--remove from here downwards --> but not the submit button.

I assume the easiest way to do this is with Pseudo classes, but this is confusing to me.

<div class="span2" style="margin-left:0px">
        <h3>School</h3>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="25" id="tag_25" name="id[]">Pre-Prep
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="26" id="tag_26" name="id[]">Junior
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="27" id="tag_27" name="id[]">Senior
        </label>
        <!--remove from here downwards -->
        <h3>Event</h3>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="29" id="tag_29" name="id[]">Examination
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="30" id="tag_30" name="id[]">Sport/Games
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="31" id="tag_31" name="id[]">Presentation
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="32" id="tag_32" name="id[]">Religious Observance
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="33" id="tag_33" name="id[]">Staff Event
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="34" id="tag_34" name="id[]">Reports/Grades
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="35" id="tag_35" name="id[]">Society/Activity
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="36" id="tag_36" name="id[]">Visit
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="37" id="tag_37" name="id[]">Parents’ Event
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="38" id="tag_38" name="id[]">Music/Drama
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="39" id="tag_39" name="id[]">Special Event
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="40" id="tag_40" name="id[]">Charity/Community
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="41" id="tag_41" name="id[]">Alumni
        </label>
        <input type="submit" value="Submit" class="btn black">
    </div>

Answer 1

You need to use these selectors inorder to hide the h3, label and checkbox from where you've commented to

Demo

h3:nth-of-type(2) {
    display: none;
}

h3:nth-of-type(2) ~ label {
    display: none;
}

The first selector simply hides 2nd h3, just to be more specific, you should use span2 h3 and not just h3 which will hide your h3 element, and in the second selector, I am hiding all the labels which are preceded by 2nd h3

Answer 2

If you can get your CMS to add label 'for' tags (which they should have anyway) you can easily target those you want to show. In fact, there are soooo many you want hidden, I'd hide them all, then show only the ones you want

Answer 3

A bit of advice rather than an answer as such, but you should probably consider using a visually hidden technique such as:

border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

rather than:

display:none;

that way the text will still be readable by screen readers but visually hidden from the screen. display: none will mean the answers are not available to anyone who needs help reading the text on a webpage.