title: Is there a better way to write the following CSS?
body: <p>I have the following CSS:</p>
  
  <pre><code>.navbar-inverse .nav &gt; li &gt; youtube-dialog &gt; a {
      color: #999999;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      padding: 10px 15px 10px;
      display: block;
      text-decoration: none; /*underline*/
  
  }
  
  .navbar-inverse .nav &gt; li &gt; youtube-dialog &gt; a:hover {color: #ffffff;}
  </code></pre>
  
  <p>Then I have:</p>
  
  <pre><code>.navbar-inverse .nav &gt; li &gt; video-server-dialog &gt; a {
      color: #999999;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      padding: 10px 15px 10px;
      display: block;
      text-decoration: none; /*underline*/
  
  }
  
  .navbar-inverse .nav &gt; li &gt; video-server-dialog &gt; a:hover {color: #ffffff;}
  </code></pre>
  
  <p>As you can see all that is changed in the second set of styles is the name of an element.</p>
  
  <p>Is there a way to write this without so much duplication?</p>