title: Override Default CSS Properties
body: <p>i do have a wordpress theme with the default input CSS. </p>
  
  <pre><code>input, input[type="text"], input[type="password"], input[type="datetime"],     input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],   input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  border: none !important;
  background-color: #f0efed;
  line-height: 40px;
  font-size: 16px;
  color: #555;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: :0px;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 40px;
  }
  </code></pre>
  
  <p>I want to override the input styles such as 'text'and 'submit' in a specific div only. </p>
  
  <p>Sample HTML:</p>
  
  <pre><code>&lt;div class="checkout_page_container"&gt;
  &lt;table class="checkout_cart"&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying this CSS. But they wont work..</p>
  
  <pre><code>.checkout_page_container .checkout_cart input[type="text"] {
  border: 1px solid #666;
  }
  
  .checkout_page_container .checkout_cart input[type="submit"] {
  border: 1px solid #ccc;
  color:#000;
  }
  </code></pre>
  
  <p>When i do inpect element. the browsers still detects the default input styles of the theme. </p>