title: Do I need to specify every selector to style a nested element?
body: <p>What is the proper way style a specific element that is deeply nested.</p>
  
  <p>For example:</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;div class="wrapper"&gt;
    &lt;div class="content"&gt;
       &lt;div class="main"&gt;
           &lt;div class="profile"&gt;
              &lt;div class="description"&gt;
                    &lt;div class="name"&gt;John Doe&lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I want to make the name "John Doe" bold, do I name every selector:</p>
  
  <pre><code>.wrapper .content .main .profile .description .name { font-weight:bold; }
  </code></pre>
  
  <p>or do I just specify the selector directly like this:</p>
  
  <pre><code>.name { font-weight:bold; }
  </code></pre>
  
  <p>I am confused on what is the proper coding method. Thanks for your time!</p>