CSS Hidden First Child - html

Question

I have an un-editable HTML, which cannot change anything.
I need to hide the first checkbox and the second one will show. It is done in CSS, but somehow it doesn't work as expected.
Here is its LIVE sample.
Please help.
.treeview-container .treeview-item:first-child .form-check label input[type="checkbox"] {
visibility: hidden;
}
<div class="treeview-container">
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />First Box
</label>
</div>
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />Second Box
</label>
</div>
</div>
</div>
</div>

Answer 1

The problem is that .treeview-item:first-child is targetting both of the checkboxes' respective .form-check containers (as they are both the first child of their parent .treeview-item).
This is perhaps a little counter-intuitive, as you may expect the :first-child pseudo-selector to only target the very first occurence of a child of .treeview-item. This is not the case, as the :first-child selector actually targets the first child of each of the .treeview-item parents.
In order to correct this, you can simply use two child combinator selectors (>) to ensure that .treeview-item is a direct child of .treeview-container, and .form-check is a direct child of that .treeview-item.
This can be seen in the following:
.treeview-container > .treeview-item > .form-check label input[type="checkbox"] {
visibility: hidden;
}
<div class="treeview-container">
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />First Box
</label>
</div>
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />Second Box
</label>
</div>
</div>
</div>
</div>
Hope this helps! :)

Answer 2

.treeview-item:first-of-type {
display: none;
}

Answer 3

You can create an ID and add it to any elements you want hidden. However this only hides the element. If you do not want the user to be able to change the checkbox you may want to remove that input type all together.
.treeview-container .treeview-item:first-child .form-check label input[type="checkbox"] {
visibility: hidden;
}
#hideMe {
display: none;
}
<div class="treeview-container">
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id = "hideMe"/>First Box
</label>
</div>
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />Second Box
</label>
</div>
</div>
</div>
</div>

Answer 4

Using child combinator (>) in between two selectors will select a direct child of the parent. Currently, your code is selecting both inputs as you are just checking for decendents ..ie if the input has an ancestor as .treeview-container or not.
So using two consecutive child combinator will help you get expected result.
Code below.
.treeview-container > div > .form-check label input[type="checkbox"] {
visibility: hidden;
}