CODEWITHSUNDEEP
htmlcss
abcid d
abcid d

Reputation: 2947

CSS Hidden First Child

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>

Upvotes: 0

Views: 663

Answers (4)

Uchit Kumar
Uchit Kumar

Reputation: 677

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;      
 }

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

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! :)

Upvotes: 1

Josh Adams
Josh Adams

Reputation: 2099

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>

Upvotes: 0

ispykenny
ispykenny

Reputation: 1

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

Upvotes: 0

Related Questions