title: CSS class for span inside a inside p
body: <p>I have such a  structure of HTML:</p>
  
  <pre><code>&lt;p&gt;
      &lt;a href="#"&gt;
          &lt;span class = "class-for-span"&gt; SOME TEXT HERE &lt;/span&gt;
      &lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>p a{
      color: grey;
      text-decoration: underline;
  }
  
  .class-for-span {
      color: red;
      text-decoretion: none;
  }
  
  .class-for-span:hover {
      text-decoration:underline;
  }
  </code></pre>
  
  <p>I want to get somethink like this:</p>
  
  <p>For every a inside p i need grey underlined link. If there is span into a tag it must be red without decoration, and red underlined when its hover.</p>
  
  <p>Now I have grey underlined link, if span inside a tag - red link with grey underline and red link with red udnerline when it's hover.</p>
  
  <p>How can i solve my problem only with css? I've been trying also something like this:</p>
  
  <pre><code>p a span .class-for-span {
  text-decoration: none;
  }
  </code></pre>
  
  <p>but it's not working too...</p>