title: my css a class is affecting my menu bar items but i only want it to work on my photo gallery
body: <pre><code>&lt;div class="gallery"&gt;
          &lt;a tabindex="1"&gt;&lt;img src="images/smile.jpg"&gt;&lt;/a&gt;
          &lt;a tabindex="1"&gt;&lt;img src="images/smile.jpg"&gt;&lt;/a&gt;
          &lt;a tabindex="1"&gt;&lt;img src="images/smile.jpg"&gt;&lt;/a&gt;
          &lt;a tabindex="1"&gt;&lt;img src="images/smile.jpg"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  a{
    float:left;
    width:25%;
    height:25%;
    position:relative;
    border:1px solid #333;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
  }
  
  a img{
    display:block;
    width:100%;
    height:100%;
    -webkit-transition-property:width, height;
    -webkit-transition-duration:300ms;
    -moz-transition-property:width, height;
    -moz-transition-duration:300ms;
    -o-transition-property:width, height;
    -o-transition-duration:300ms;
    position:absolute;
    z-index:1;
    opacity:0.3;
    cursor:pointer;
  }
  </code></pre>
  
  <p>This is a real beginner question but I'm not that good with CSS anymore.</p>
  
  <p>I want to use my css above to work only on my gallery class but right now it's affecting all  a href's on the page.</p>
  
  <p>Any help would be greatly appreciated. Thank you.</p>