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>
You need to use these selectors inorder to hide the h3, label and checkbox from where you've commented to
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