title: CSS Styling a 'div' element nested deep inside other elements
body: <p>This is how the code looks:</p>
  
  <p><img src="https://i.stack.imgur.com/frFxD.gif" alt="enter image description here"></p>
  
  <p>And I want to a border for the highlighted element, i.e. <code>&lt;div class="Comment"&gt;...&lt;/div&gt;</code>, how do I style it using CSS?</p>
  
  <p><strong><em>NOTE:</strong> Notice the class named 'Comment'? It is used in both the highlighted element and it's parent element. So, that's probably why this one's a bit tricky?</em></p>
  
  <p>I tried the CSS codes below, and some others, and none worked.</p>
  
  <pre><code>.DataList .Item .comment, .DataList .Comment .comment,
  .DataList .FirstComment .comment, .DataList .Mine .comment {
      border:1px solid #666;
      padding:10px;
      border-radius:3px;
          -moz-border-radius:3px;
          -webkit-border-radius:3px;
  }
  
  .DataList .Item div.comment, .DataList .Comment div.comment,
  .DataList .FirstComment div.comment, .DataList .Mine div.comment {
      border:1px solid #666;
      padding:10px;
      border-radius:3px;
          -moz-border-radius:3px;
          -webkit-border-radius:3px;
  }
  </code></pre>
  
  <p>What am I doing wrong? Hope someone can help me solve this small riddle. Thanks.</p>