title: How do you apply a style to only one div in the HTML?
body: <p>I had working code until I tried to make the style.css page apply only to a certain div on the index.html file. This is the current code I have: <a href="http://codepen.io/anon/pen/LEXxeM" rel="nofollow">http://codepen.io/anon/pen/LEXxeM</a></p>
  
  <p>All that I did (which made it stop working) was completely wrap the style.css page in "adder { }", and put all the code in the body in a div tag.</p>
  
  <p>Any ideas as to why this was an incorrect step?</p>
  
  <p>In case codepen can't be accessed, below is the code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--
  
  --&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;link type="text/css" rel="stylesheet" href="css/styleok.css" /&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/init.js"&gt;&lt;/script&gt;
  
  
  
  
  
      &lt;/head&gt;
  
  
  
     &lt;body&gt;
  
  
          &lt;div class="adder"&gt;
          &lt;div id="container"&gt;
              &lt;header&gt;
                   &lt;h1&gt;Task ListO&lt;/h1&gt;
                &lt;a href="#" id="clear"&gt;Clear all&lt;/a&gt;
  
              &lt;/header&gt;
  
              &lt;section id="taskIOSection"&gt;
                      &lt;div id="formContainer"&gt;
                      &lt;form id="taskEntryForm"&gt;
                          &lt;input id="taskInput" placeholder="Add your interests here..." /&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;ul id="taskList"&gt;&lt;/ul&gt;
              &lt;/section&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
  
  
      adder {
  
       * {
          padding:0;
          margin:0;
      }
      body {
        background:url('');
          background-color:#2a2a2a;
          font-family:'Open Sans', sans-serif;
      }
      #container {
          background-color: #111216;
          color:#999999;
          width:350px;
          margin: 50px auto auto auto;
          padding-bottom:12px;
      }
      #formContainer {
          padding-top:12px
      }
      #taskIOSection {
      }
      #taskInput {
  
          font-size:14px;
          font-family:'Open Sans', sans-serif;
          height:36px;
          width:311px;
          border-radius:100px;
          background-color:#202023;
          border:0;
          color:#fff;
          display:block;
          padding-left:15px;
         -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
      }
      #taskInput:focus{
        box-shadow: 0px 0px 1pt 1pt #999999;
       background-color:#111216; 
        outline:none;
      }
      ::-webkit-input-placeholder {
          color: #333333;
          font-style:italic;
          /* padding-left:10px; */
      }
      :-moz-placeholder {
          /* Firefox 18- */
          color: #333333;
          font-style:italic;
      }
      ::-moz-placeholder {
          /* Firefox 19+ */
          color: #333333;
          font-style:italic;
      }
      :-ms-input-placeholder {
          color: #333333;
          font-style:italic;
      }
      header {
          margin-top:0;
          background-color:#F94D50;
      width:338px;
      height:48px;
      padding-left:12px;
  }
  header h1 {
      font-size:25px;
      font-weight:300;
      color:#fff;
      line-height:48px;
    width:50%;
    display:inline;
  }
  header a{
  
    width:40%;
    display:inline;
    line-height:48px;
  }
  #taskEntryForm {
      background-color:#111216;
      width:326px;
      height: 48px;
      border-width:0px;
      padding: 0px 12px 0px 12px;
      font-size:0px;
  }
  #taskList {
      width: 350px;
      margin:auto;
      font-size:16px;
      font-weight:600;
  }
  ul li {
      background-color:#17181D;
      height:48px;
      width:314px;
      padding-left:12px;
      margin:0 auto 10px auto;
      line-height:48px;
      list-style:none;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }    
  
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  $(document).ready(function () {
                          var i = 0;
                          for (i = 0; i &lt; localStorage.length; i++) {
                              var taskID = "task-" + i;
       $('#taskList').append("&lt;li id='" + taskID + "'&gt;" + localStorage.getItem(taskID) + "&lt;/li&gt;");
                          }
                          $('#clear').click(function () {
                              localStorage.clear();
                          });
                          $('#taskEntryForm').submit(function () {
                              if ($('#taskInput').val() !== "") {
                                  var taskID = "task-" + i;
                                  var taskMessage = $('#taskInput').val();
                                  localStorage.setItem(taskID, taskMessage);
      $('#taskList').append("&lt;li class='task' id='" + taskID + "'&gt;" + taskMessage + "&lt;/li&gt;");
                                  var task = $('#' + taskID);
                                  task.css('display', 'none');
                                  task.slideDown();
                                  $('#taskInput').val("");
                                  i++;
                              }
                              return false;
                          });
  
                          $('#taskList').on("click", "li", function (event) {
                              self = $(this);
                              taskID = self.attr('id');
                              localStorage.removeItem(taskID);
                              self.slideUp('slow', function () {
                                  self.remove();
                              });
  
                          });
  
  
                      });
  </code></pre>
  
  <p>Thank you.</p>