title: ASP.NET: Hide CheckBox items in CheckBoxList control
body: <p>I have a data-bound CheckBoxList control that can grow quite large, so I'm trying to create a filter for it. Here's what I'm doing:</p>
  
  <pre><code>foreach( ListItem item in this.UserRolesList.Items ) {
      if( !item.Value.StartsWith( this.RolesFilterList.SelectedValue ) ) {
          item.Attributes.CssStyle["display"] = "none";
      } else item.Attributes.CssStyle["display"] = "inline";
  }
  </code></pre>
  
  <p>This mostly works, except that when ASP.NET renders the CheckBoxList, it does so using a table, with each CheckBox control nested within its own <code>&lt;TR&gt;</code> element. This means that even though the items I don't want to see aren't displayed, the white space for their rows is, so there's quite a bit of whites pace I still need to content with.</p>
  
  <p>I'm not aware that I can access the <code>&lt;TR&gt;</code> element without subclassing the control, which this being a "nice-to-have" feature I don't have time to do, so I'm wondering if there's a CSS trick I can use to access an element's parent's parent (e.g., <code>&lt;input type="checkbox"/&gt;</code> -> <code>&lt;td&gt;</code> -> <code>&lt;tr&gt;</code>). I've used the <code>:first-child</code> pseudo-element before, but my web searches for this kind of trick have been fruitless, so I have my doubts. Can't hurt to ask though, right?</p>