title: different css style only for children of a certain div
body: <p>This is what I have:<br>
  I have a div <code>id="navbar"</code> and various styles for the <code>ul</code> and <code>li</code> elements there.</p>
  
  <p>Now I want to know, if there is any selector in CSS where I can say "the following css-styles shall only be aplliedd to children of #navbar"</p>
  
  <p>something like:</p>
  
  <pre><code>/* ***** NAVBAR ****** */
  #navbar {
      /* Add a gray right border to all list items, except the last item (last-child) */
      li {
          border-right: 1px solid #bbb;
      }
  
      li:last-child {
          border-right: none;
      }
  
      .active {
          background-color: #4CAF50;
      }
  
      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #333;
      }
  
      li {
          float: left;
      }
  
      li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
      }
      /* Change the link color to #111 (black) on hover */
      li a:hover {
          background-color: #111;
      }
  }
  </code></pre>
  
  <p>are there any ways to apply various css-styles only to elements that are chil or child-child or child-..-child of a certain HTML-element?</p>
  
  <p>Note I'm also using jQuery so if thats only possible with jQuery, it will not be a problem.</p>
  
  <p>sincerly basti</p>