i have h:selectOneRadio as follows:

<div id="container" class="container">
<h:selectOneRadio layout="pageDirection" id="sel_radio" value="#{mBean.selectedRadio}">  
   <f:selectItem id="option1" itemLabel="item1" itemValue="1" />  
   <f:selectItem id="option2" itemLabel="item2" itemValue="2" />            
</h:selectOneRadio>
.
.
.
</div>

above will be rendered as follows:

<div id="container" class="container">
<table>
  <tbody>
    <tr>
      <td>
        <input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1">

ISSUE: the container class gives default width for all inputs, that will affect on my radio button, here's the css class:

.container input {
width: 200px;
}

and i can't change this class because it's a template and used in other pages, i want to override this style in this page only.

i tried to override it as by adding following style:

.container #myForm:sel_radio:0 {
  width: 50px !important;
}

but it doesn't work too.

please advise how to fix that, thanks.