title: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
body: <p>In CSS it is possible to style <code>placeholder</code> text within an input using a combination of vendor-specific pseudo-classes and pseudo-elements (to get the best cross-browser coverage).</p>
  
  <p>These all share the same basic properties (ie: text styling and color declarations).</p>
  
  <p>However whilst I inevitably want to apply the same styles irrespective of browser vendor, it doesn't appear to be possible to combine these together into a comma-separated selector (as you would with any other piece of CSS where you want two selectors to share the same styles).</p>
  
  <p>As an example, I tend to target placeholder styling using the four following selectors:</p>
  
  <ul>
  <li><code>input:-moz-placeholder</code></li>
  <li><code>input::-moz-placeholder</code></li>
  <li><code>input:-ms-input-placeholder</code></li>
  <li><code>input::-webkit-input-placeholder</code></li>
  </ul>
  
  <p>(although <code>:-moz-placeholder</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder" rel="noreferrer">is being deprecated</a> in favor of <code>::-moz-placeholder</code> this only occurred with the release of FireFox 19 so at present both are needed for better browser-support). </p>
  
  <p>What's frustrating is that declaring and giving each (the same) style leads to a lot of repetition within the CSS.</p>
  
  <p>So, to make sure that placeholder text is right-aligned and italic, I would end up with:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>input:-moz-placeholder{
      font-style: italic;
      text-align: right;
  }
  input::-moz-placeholder{
      font-style: italic;
      text-align: right;
  }
  input:-ms-input-placeholder{
      font-style: italic;
      text-align: right;
  }
  input::-webkit-input-placeholder{
      font-style: italic;
      text-align: right;
  }
  </code></pre>
  
  <p>What I really want to do is to combine them as one single comma-seperated rule set like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>input:-moz-placeholder,
  input::-moz-placeholder,
  input:-ms-input-placeholder,
  input::-webkit-input-placeholder{
      font-style: italic;
      text-align: right;
  }
  </code></pre>
  
  <p>However, despite trying this on a fair few occasions, this never seems to work.  It makes me concerned that there's some fundamental part of CSS that I'm not understanding.</p>
  
  <p>Can anybody shed any light on why this happens?</p>