title: Can you select an element via CSS with more classes with a same name?
body: <p>I was just wondering if you can select an element, which has multiple classes with same name, e.g. <code>&lt;p class="demo test demo"&gt;</code> with CSS selector <code>.demo.demo</code>?</p>
  
  <p>Example code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        .demo {    
          color: blue;
        }
        .demo.demo {    
          color: red;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p class="demo"&gt;This should be blue&lt;/p&gt;
      &lt;p class="demo demo"&gt;This should be red&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this example the <code>.demo.demo</code> selector overrides the <code>.demo</code> selector. Why is that, and is this even possible to do <strong>in CSS</strong>?</p>