title: HTML role attribute causes content to not display
body: <p>Hi there I am using the <code>role="main"</code> attribute to define the main content of my page. The problem is if I use:</p>
  
  <pre><code>&lt;div role="main"&gt;
      &lt;article class="post-preview"&gt;
          &lt;div class="post-preview-img" style="background-image:url(img/capeEnrage.jpg);"&gt;&lt;/div&gt;
      &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My content will not display?
  If I remove the <code>div</code> tag with <code>role</code> attribute it displays without any problems.</p>
  
  <p>My CSS is as follows:</p>
  
  <pre><code>div[role="main"] article.post-preview {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      position:relative;
  }
  div[role="main"] article.post-preview div.post-preview-img {
      width:inherit;
      height:inherit;
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      position:absolute;
      opacity:1;
      z-index:2;
  }
  </code></pre>
  
  <p>If anyone can offer any insight as to what I am doing wrong I would greatly appreciate it.</p>