title: Nesting Classes within an ID in the .css?
body: <p>Okay heres my .css</p>
  
  <pre><code>.centerhex {
      background-image:url(http://i.imgur.com/4sZDtfK.png);
      height:224px;
      width:210px;
      position:absolute;
      opacity:0;
      transition:opacity 2s ease-in-out;
  }
  .transtart{
      opacity:0
  }
  @-webkit-keyframes fadein { 
      0%{opacity:0;}
      40%{opacity:1;}
      50%{opacity:1;}
      100%{opacity:0.05;} 
  }
  @keyframes fadein {
      0%{opacity:0;}
      40%{opacity:1;}
      50%{opacity:1;}
      100%{opacity:0.05;} 
  }
  .done{
      animation-delay:0.5s;
      -webkit-animation-delay:0.5s;
  }
  .fadein{    
      animation:fadein 0.65s;
      animation-timing-function:linear;
      animation-fill-mode:forwards;
      animation-iteration-count:1;
      -webkit-animation-iteration-count:1;
      -webkit-animation:fadein 0.65s;
      -webkit-animation-timing-function:linear;
      -webkit-animation-fill-mode: forwards;
  }
  @-webkit-keyframes pulse { 
      0%{opacity:0.05;}
      10%{opacity:0.1;}
      100%{opacity:0.05;} 
  }
  @keyframes pulse {
      0%{opacity:0.05;}
      10%{opacity:0.1;}
      100%{opacity:0.05;} 
  }
  .pulse{ 
      animation:fadein 4s;
      animation-timing-function:linear;
      animation-fill-mode:forwards;
      animation-iteration-count:infinite;
      animation-delay:1s
      -webkit-animation-delay:1s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation:fadein 4s;
      -webkit-animation-timing-function:linear;
      -webkit-animation-fill-mode: forwards;
  }
  </code></pre>
  
  <p>What I was curious about is if it is possible to create an id specifically for nesting predefined classes, such as:</p>
  
  <pre><code>#hexa.centerhex.transtart.fadein.done
  </code></pre>
  
  <p>So far experiments in doing this have failed.. so Im not entirely sure what Im doing wrong.</p>
  
  <p>The idea I have for this is that Im going to be creating some script that replaces an ID with another ID. For instance I would make:</p>
  
  <pre><code>#hexa.centerhex.transtart.fadein.done
  </code></pre>
  
  <p>Turn into: </p>
  
  <pre><code>#hexb.centerhex.transtart.pulse.done
  </code></pre>