I've this code
<div id="editGridReglas" class=" x-row-editor x-small-editor" style="position: absolute; z-index: 11000; width: 1033px; left: 0px; top: 126px; visibility: visible; ">
<div class="x-row-editor-header x-unselectable" id="ext-gen296" style="-webkit-user-select: none; ">
<span class="x-row-editor-header-text">
</span></div>
<div class="x-row-editor-bwrap" id="ext-gen297">
<div class="x-box-inner" id="ext-gen308" style="width: 1033px; height: 22px; ">
<div id="ext-comp-1083" name="ext-comp-1083" class=" x-form-display-field x-box-item" style="width: 22px; left: 1px; top: 0px; ">
</div>
<input type="text" size="20" autocomplete="off" id="ideprodcnt" name="ideprodcnt"
class="x-form-text x-form-field x-box-item" style="width: 251px; left: 24px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="ideplan" name="ideplan"
class="x-form-text x-form-field x-box-item" style="width: 251px; left: 276px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="iderev" name="iderev"
class="x-form-text x-form-field x-box-item" style="width: 251px; left: 528px; top: 0px; " title="">
<div class="x-form-check-wrap x-box-item" id="ext-gen319" style="width: 249px; left: 781px; top: 0px; ">
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
<label for="estado" class="x-form-cb-label" id="ext-gen320"> </label>
</div>
<div id="ext-comp-1078" name="ext-comp-1078" class="x-form-display-field" style="width: 22px; left: 1px; top: 0px; ">
</div>
<input type="text" size="20" autocomplete="off" id="ideprodcnt" name="ideprodcnt"
class="x-form-text x-form-field" style="width: 251px; left: 25px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="ideplan" name="ideplan"
class="x-form-text x-form-field" style="width: 251px; left: 278px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="iderev" name="iderev"
class="x-form-text x-form-field" style="width: 251px; left: 531px; top: 0px; " title="">
<div class="x-form-check-wrap" id="ext-gen309" style="width: 249px; left: 785px; top: 0px; ">
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
<label for="estado" class="x-form-cb-label" id="ext-gen310"> </label>
</div>
</div>
</div>
</div>
I need to hide all inputs haven't the word "x-box-item" in their class with exception of this component:
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
This component is inside a div label:
<div class="x-form-check-wrap x-box-item" id="ext-gen319" style="width: 249px; left: 781px; top: 0px; ">
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
<label for="estado" class="x-form-cb-label" id="ext-gen320"> </label>
</div>
I'm using this rule css:
#editGridReglas input:not(.x-box-item){
visibility: hidden;
}
#editGridReglas div .x-box-item input[type=checkbox]{
visibility: visible;
}
Both rules work fine but anyway I want to know if I'm using correctly the CSS rules
[EDIT]
On IE 8
#editGridReglas input.x-form-text.x-form-field {
visibility: hidden;
}
#editGridReglas input.x-box-item {
visibility: visible !important;
}
#editGridReglas div.x-form-check-wrap.x-box-item input{
visibility: visible !important;
}
You could just use #estado {visibility:visible;} since it has an ID. If it has trouble showing up, you could put !important in the secondary rule:
#estado {visibility:visible !important;}
or
#editGridReglas div input[type=checkbox]:not(.x-box-item) {visibility:visible !important;}
if the ID is back-ended, and the CSS won't know IDs.
edit 2: adding a third way, from my comment below.
div.x-box-item input[type=checkbox] {visibility:visible !important}
This one finds the DIV with x-box-item as a class, input-checkboxes inside it, and makes them visible. According to your HTML above, should work.