Removing selector boxes in a list via css

[peterk900]

I have found past posts suggesting .css that targets the correct tag and sets display: none. For example....

.list_5_checkAll {display:none !important;} and

#listform_5_com_fabrik_5 th.fabrik_select .heading{
display:none !important;

... but neither of these work.

It is the selector in red that I'm trying to style.

<td class="fabrik_select fabrik_element">
<input id="id_2" type="checkbox" value="2" name="ids[2]">
<div style="display:none"></div>
</td>

This works
#id_2 {display:none !important;}

but only targets the record with id = 3.

I've tried an attribute selector such as:
input[id^="id_"] {display:none !important;}
but this doesn't work either.

Can someone suggest suitable css ? Thanks.

 

[troester]

You don't need !important if you are using the correct selectors.
Use a browser dev tool to check which ones.

#list_1_com_fabrik_1 .fabrik_select {
display: none;
}
will hide the select box in table header and rows if your list has id=1

 

[peterk900]

Thanks troester - solves the problem perfectly. Point taken about !important.