title: Excluding a specific image from some CSS formatting
body: <p>I have a bunch of images loaded up on my home page in a grid. Two of these images are loaded directly from the assets folder, whereas the other four are loaded based on whether or not they are selected to be main page items.</p>
  
  <p>Here is the code for the way they are loaded in:</p>
  
  <pre><code>    &lt;div class="three_column_grid"&gt;
          &lt;div class="col span_1_of_3"&gt;
              &lt;%= image_tag("1stassetsimage.png") %&gt;
              &lt;%= image_tag("2ndassetsimage.jpg") %&gt;
              &lt;% @product = Product.all %&gt;
              &lt;% @product.each do |product| %&gt;
                  &lt;% if product.display_on_home_page and !product.is_highlight_product and !(product == '..') %&gt;
                      &lt;%= link_to image_tag(product.product_image), products_content_url(product.id), :controller=&gt;'products' %&gt;
                  &lt;% end %&gt;
              &lt;% end %&gt;
              &lt;% @subcategory = Subcategory.all %&gt;
              &lt;% @subcategory.each do |subcategory| %&gt;
                  &lt;% if subcategory.display_on_home_page and !subcategory.is_highlight_product and !(subcategory == '..') %&gt;
                      &lt;%= link_to image_tag(subcategory.image_attachment), subcategories_content_url(subcategory.id), :controller=&gt;'subcategories' %&gt;
                  &lt;% end %&gt;
              &lt;% end %&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>As for the CSS itself, this is the way I'm controlling the styling of the various items that come in:</p>
  
  <pre><code>           .three_column_grid{
                  margin-top: 2%;
                  width: 60%;
                  position: relative;
                  float: right;
  
                  img {
                      display: inline-block;
                      width: 200px;
                      height: 200px;
                      -webkit-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                      -moz-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                      box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                      margin-left: 2%;
                      margin-right: 2%;
                      margin-bottom: 4%;
  
                      &amp;:hover{
                          display: inline-block;
                          border: none !important;
                          -webkit-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                          -moz-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                          box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                      }
                  }
              }
  </code></pre>
  
  <p>I have tried a few things; adding an extra div tag that formats just the assets images throws off the whole thing, and using the <code>:not</code> selector I get the same result. I want the shadow to be removed around the <code>1stassetsimage.png</code> but I want the other formatting to stay the same, so it will fit into the grid correctly.</p>