123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>
  <div id='header'>
    <h1>CSS Selectors for Reference</h1>
    <div class='extra-shadow'></div>
  </div>
</header>

<div class='leather'>
  <div class='leather-stitch'>
    <ul class='rings'>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class='tabs'>
      <li id='t-1' class='current'>*</li>
      <li id='t-2'>#i</li>
      <li id='t-3'>.c</li>
      <li id='t-4'>e</li>
      <li id='t-5'>e&nbsp;f</li>
      <li id='t-6'>e>f</li>
      <li id='t-7'>e+f</li>
      <li id='t-8'>e~f</li>
      <li id='t-9'>e[a]</li>
      <li id='t-10'>e:s</li>
      <li id='t-11'>info</li>
    </ul>

    <div id='pen'>
      <div id='cap'>
        <div id='cap1'></div>
        <div id='cap2'></div>
        <div id='cap3'></div>
        <div id='cap4'></div>
        <div id='cap5'></div>
        <div id='cap6'></div>
      </div>
      <div id='hold'>
        <div id='label'>http://megdal.be</div>
        <div id='band'></div>
        <div id='band1'></div>
        <div id='band2'></div>
        <div id='band3'></div>
      </div>
      <div id='cart'>
        <div id='cart2'></div>
        <div id='cart3'></div>
      </div>
      <div id='metal'></div>
      <div id='color'></div>
      <div id='ink'></div>
    </div>
    <article>
      <p>I occasionally forget all the various css selectors that are avaliable. Made this little reference to help :)</p>
      <section id='s-1' class='current'>
        <h2>wildcard selector</h2>
        <p>Select all elements.</p>

        <p>Removes all margins in document:</p>
        <pre><code>* { 
  margin:0px; 
}</code></pre>
        <p>Makes all borders blue inside of div:</p>
        <pre><code>div * { 
  border:1px solid #00F; 
  margin:5px; 
}</code></pre>
        <xmp>
          <div>
            <div>div <span>span</span></div>
            <span>span</span>
            <p>p</p>
          </div>
        </xmp>
        <div class='example' id='e-1'>
          <div>div <span>span</span></div>
          <span>span</span>
          <p>p</p>
        </div>
      </section>

      <section id='s-2'>
        <h2>id selector</h2>
        <p>Select element by id.</p>

        <p>Colors text within span with id='red' #F00:</p>
        <pre><code>span#red { 
  color:#F00; 
}</code></pre>

        <p>Makes text within all elements with id='red' #F00:</p>
        <pre><code>#red { 
  color:#F00; 
}</code></pre>
        <xmp>
          <div>
            <div>div <span id='red'>span</span></div>
            <span>span</span>
            <p>p</p>
          </div>
        </xmp>
        <div class='example' id='e-2'>
          <div>div <span id='red'>span</span></div>
          <span>span</span>
          <p>p</p>
        </div>
      </section>

      <section id='s-3'>
        <h2>class selector</h2>
        <p>Select element by class.</p>

        <p>Colors text within span with class='blue' #00F:</p>
        <pre><code>span.blue { 
  color:#00F; 
}</code></pre>

        <p>Colors text within all elements with class='blue' #00F:</p>
        <pre><code>.blue { 
  color:#00F; 
}</code></pre>
        <xmp>
          <div>
            <div>div <span class='blue'>span</span></div>
            <span>span</span>
            <p class='blue'>p</p>
          </div>
        </xmp>
        <div class='example' id='e-3'>
          <div>div <span class='blue'>span</span></div>
          <span>span</span>
          <p class='blue'>p</p>
        </div>
      </section>

      <section id='s-4'>
        <h2>type selector</h2>
        <p>Select element by type.</p>

        <p>Makes all links bold:</p>
        <pre><code>a { 
  font-weight:bold; 
}</code></pre>
        <xmp>
          <div>
            <div>div <a href='#'>link</a></div>
            <span>span</span>
            <p>p <a href='#'>link2</a></p>
          </div>
        </xmp>
        <div class='example' id='e-4'>
          <div>div <a href='#'>link</a></div>
          <span>span</span>
          <p>p <a href='#'>link</a></p>
        </div>
      </section>

      <section id='s-5'>
        <h2>descendant selector</h2>
        <p>Select element within element.</p>

        <p>Makes all text bold for span tags within p tags:</p>
        <pre><code>p span { 
  font-weight:bold; 
}</code></pre>
        <xmp>
          <div>
            <div>div <span>span</span></div>
            <span>span</span>
            <p>p <span>span</span></p>
          </div>
        </xmp>
        <div class='example' id='e-5'>
          <div>div <span>span</span></div>
          <span>span</span>
          <p>p <span>span</span></p>
        </div>
      </section>

      <section id='s-6'>
        <h2>direct descendant selector</h2>
        <p>Select child of element directly contained within.</p>

        <p>Makes red border around first level of li tag, but not second:</p>
        <pre><code>div > ul > li { 
  border:1px solid #F00;
}</code></pre>
        <xmp>
          <div>
            <ul>
              <li>1
                <ul>
                  <li>A</li>
                  <li>B</li>
                </ul>
              </li>
              <li>2</li>
            </ul>
          </div>
        </xmp>
        <div class='example' id='e-6'>
          <div>
            <ul>
              <li>1
                <ul>
                  <li>A</li>
                  <li>B</li>
                </ul>
              </li>
              <li>2</li>
            </ul>
          </div>
        </div>
      </section>

      <section id='s-7'>
        <h2>adjacent selector</h2>
        <p>Select element directly after.</p>

        <p>Makes p directly after h1 tags red:</p>
        <pre><code>h1 + p { 
  color:#F00 
}</code></pre>
        <xmp>
          <h4>This is an h4 title</h4>
          <p>This is the first p tag</p>
          <p>This is the second p tag</p>
          <p>This is the third p tag</p>
        </xmp>
        <div class='example' id='e-7'>
          <h4>This is an h4 title</h4>
          <p>This is the first p tag</p>
          <p>This is the second p tag</p>
          <p>This is the third p tag</p>
        </div>
      </section>

      <section id='s-8'>
        <h2>following selector</h2>
        <p>Selects all element after.</p>

        <p>Makes all p tags following an h4 red:</p>
        <pre><code>h4 ~ p { 
  color:#F00 
}</code></pre>
        <xmp>
          <p>This is the first p tag</p>
          <h4>This is an h4 title</h4>
          <p>This is the second p tag</p>
          <p>This is the third p tag</p>
          <p>This is the fourth p tag</p>
        </xmp>
        <div class='example' id='e-8'>
          <p>This is the first p tag</p>
          <h4>This is an h4 title</h4>
          <p>This is the second p tag</p>
          <p>This is the third p tag</p>
          <p>This is the fourth p tag</p>
        </div>
      </section>

      <section id='s-9'>
        <h2>attribute selector</h2>
        <p>Selects all elements with attribute.</p>

        <p>Make all a tags with titles yellow:</p>
        <pre><code>a[title] { 
  color:#990;
}</code></pre>
        <xmp><a href='http://example.com'>link1</a>
          <a href='http://example.com' title='link2'>link2</a>
          <a href='http://example.com' title='link3'>link3</a></xmp>
        <div class='example' id='e-9'>
          <a href='http://example.com'>link1</a><br/>
          <a href='http://example.com' title='link2'>link2</a><br/>
          <a href='http://example.com' title='link3'>link3</a><br/>
        </div>

        <p>Set the background grey for all text inputs:</p>
        <pre><code>input[type='text'] { 
  background:#CCC; 
}</code></pre>

        <p>Make all links with 'example' anywhere in the href bold:</p>
        <pre><code>a[href*='example'] { 
  font-weight:bold; 
}</code></pre>

        <p>Make all links with 'http' at the start of the href italic:</p>
        <pre><code>a[href^='http'] { 
  font-weight:bold; 
}</code></pre>

        <p>Make all links with '.jpg' at the end of the href green:</p>
        <pre><code>a[href$='.jpg'] { 
  color:#0F0; 
}</code></pre>
      </section>

      <section id='s-10'>
        <h2>pseudo-class selector</h2>
        <p>Select element by their state.</p>

        <p>Makes all visited links red:</p>
        <pre><code>a:visited { 
  color:#F00 
}</code></pre>

        <p>Makes all links green on hover:</p>
        <pre><code>a:hover { 
  color:#0F0 
}</code></pre>

        <p>Add a red border to the span adjacent to only selected radio buttons:</p>
        <pre><code>input[type=radio]:checked+span { 
  border:1px solid #F00;
}</code></pre>
        <xmp><input type='radio' name='r' checked='checked' />
          <span>On</span>
          <input name='r' type='radio' />
          <span>Off</span></xmp>
        <div class='example' id='e-10'>
          <input name='r' type='radio' checked='checked' /><span>On</span><br />
          <input name='r' type='radio' /><span>Off</span>
        </div>
      </section>

      <section id='s-11'>
        <h2>info</h2>
        <p></p>
        <p>I created this nifty little book using a couple of difference sources such as <a href='https://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/'>The 30 CSS Selectors you Must Memorize</a> by Jeffrey Way, and
          I fiddled a bit with the <a href='http://livetools.uiparade.com/ribbon-builder.html'>Ribbon builder</a> code to get my ribbon correct. The patterns used on the background, paper, and leather are modified from <a href='' https://subtlepatterns.com/>Subtle
          Patterns</a>. Other than that, the rest is mine!</p>
        <p>If you like this, check my website <a href='http://megandalbey.com'>http://megandalbey.com</a></p>
        <div id='octocorner'></div>
      </section>
    </article>
  </div>
</div>
            
          
!
            
              body {
  background: url('http://megandalbey.com/codepen/css-selectors/purplewood.jpg') #432d3e;
  font-family: 'Quattrocento Sans', sans-serif;
}

hr {
  border: none;
  border-top: 1px dashed rgba(0, 0, 0, .2);
}

a {
  text-decoration: none;
  font-weight: bold;
  color: #b620e8;
}

a:hover {
  color: #d000ff;
}

section {
  display: none;
  min-height: 410px;
}

section.current {
  display: block;
}

#octocorner {
  background: url("http://megandalbey.com/codepen/css-selectors/octocorner.png") no-repeat bottom right;
  height: 280px;
  width: 420px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}


/* - - - - - HEADER RIBBON - - - - - */

header {
  margin: 50px auto -90px;
  width: 600px;
  text-align: center;
  position: relative;
  display: block;
  z-index: 1;
}

#header {
  width: 100%;
  text-align: center;
  padding: 5px 0;
  background: #d0e4f7;
  display: block;
  background: -moz-linear-gradient(-45deg, #d0e4f7 0%, #0a77d5 50%, #87bcea 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #d0e4f7), color-stop(50%, #0a77d5), color-stop(100%, #87bcea));
  background: -webkit-linear-gradient(-45deg, #d0e4f7 0%, #0a77d5 50%, #87bcea 100%);
  background: -o-linear-gradient(-45deg, #d0e4f7 0%, #0a77d5 50%, #87bcea 100%);
  background: -ms-linear-gradient(-45deg, #d0e4f7 0%, #0a77d5 50%, #87bcea 100%);
  background: linear-gradient(135deg, #d0e4f7 0%, #0a77d5 50%, #87bcea 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea', GradientType=1);
}

header:before,
header:after {
  content: '';
  position: absolute;
  display: block;
  bottom: -1.3em;
  border: 1.6em solid #0d66a5;
  z-index: -1;
}

header:before {
  left: -1.6em;
  border-right-width: 1.5em;
  border-right-color: #0c548e;
  border-left-color: transparent;
  -webkit-box-shadow: 0px 2px 0px #a2bcd3, 0px -2px 0px #a2bcd3, rgba(0, 0, 0, 0.4) 1px 3px 1px;
  -moz-box-shadow: 0px 2px 0px #a2bcd3, 0px -2px 0px #a2bcd3, rgba(0, 0, 0, 0.4) 1px 3px 1px;
  box-shadow: 0px 2px 0px #a2bcd3, 0px -2px 0px #a2bcd3, rgba(0, 0, 0, 0.4) 1px 3px 1px;
}

header:after {
  right: -1.6em;
  border-left-width: 1.5em;
  border-left-color: #0c548e;
  border-right-color: transparent;
  -webkit-box-shadow: 0px 2px 0px #a2bcd3, 0px -2px 0px #a2bcd3, rgba(0, 0, 0, 0.4) -1px 3px 1px;
  -moz-box-shadow: 0px 2px 0px #a2bcd3, 0px -2px 0px #a2bcd3, rgba(0, 0, 0, 0.4) -1px 3px 1px;
  box-shadow: 0px 2px 0px #a2bcd3, 0px -2px 0px #a2bcd3, rgba(0, 0, 0, 0.4) -1px 3px 1px;
}

h1 {
  display: block;
  background: #0a77d5;
  margin: 0;
  font-family: 'Kaushan Script', cursive;
  color: #d0e4f7;
  font-size: 2em;
}

h1:before,
h1:after {
  content: '';
  width: 100%;
  height: 0px;
  position: relative;
  top: -3px;
  border-bottom: 1px dashed rgba(0, 0, 0, .2);
  border-top: 1px dashed rgba(255, 255, 255, .5);
  display: block;
}

h1:after {
  top: 4px;
}

header .extra-shadow {
  background: rgba(0, 0, 0, .1);
  display: block;
  height: 23px;
  position: absolute;
  bottom: -23px;
  width: 550px;
  margin: 0px 25px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
}


/* - - - - - TABS - - - - - */

.tabs {
  list-style: none;
  position: absolute;
  left: -72px;
  top: 120px;
  width: 50px;
  z-index: 100;
}

.tabs li {
  font-family: 'Coming Soon', cursive;
  line-height: 14px;
  font-size: 1em;
  padding: 10px;
  text-align: right;
  display: inline-block;
  float: right;
  margin-right: 5px;
  margin-bottom: -7px;
  position: relative;
  z-index: 0;
  border-right: none;
  cursor: pointer;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) -1px 0px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) -1px 0px 1px;
  box-shadow: rgba(0, 0, 0, 0.1) -1px 0px 1px;
}

.tabs li:hover {
  padding-right: 11px;
}

.tabs li:nth-child(odd) {
  border: 1px solid #bfd255;
  background: #bfd255;
  background: -moz-linear-gradient(top, #bfd255 0%, #99c42d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfd255), color-stop(100%, #99c42d));
  background: -webkit-linear-gradient(top, #bfd255 0%, #99c42d 100%);
  background: -o-linear-gradient(top, #bfd255 0%, #99c42d 100%);
  background: -ms-linear-gradient(top, #bfd255 0%, #99c42d 100%);
  background: linear-gradient(to bottom, #bfd255 0%, #99c42d 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#99c42d', GradientType=0);
}

.tabs li:nth-child(even) {
  border: 1px solid #d1cc55;
  background: #d1cc55;
  background: -moz-linear-gradient(top, #d1cc55 0%, #dbd534 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d1cc55), color-stop(100%, #dbd534));
  background: -webkit-linear-gradient(top, #d1cc55 0%, #dbd534 100%);
  background: -o-linear-gradient(top, #d1cc55 0%, #dbd534 100%);
  background: -ms-linear-gradient(top, #d1cc55 0%, #dbd534 100%);
  background: linear-gradient(to bottom, #d1cc55 0%, #dbd534 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d1cc55', endColorstr='#dbd534', GradientType=0);
}

.tabs li.current {
  background: url('http://megandalbey.com/codepen/css-selectors/paper.jpg') #f2f1e3 !important;
  padding: 10px 15px;
  border: 1px solid #FFF;
  border-right: none;
  margin-right: 0px;
  z-index: 1;
}


/* - - - - - H2 BRUSH STROKE - - - - - */

h2 {
  font-size: 1.6em;
  font-family: 'Coming Soon', cursive;
  margin: 0px 10px -10px;
  vertical-align: top;
  border-top: 1px dashed rgba(0, 0, 0, .2);
  height: 37px;
  position: relative;
  color: #442b4f;
}

h2:before {
  content: url('http://megandalbey.com/codepen/css-selectors/highlight.png');
  position: absolute;
  display: block;
  margin-top: -10px;
  left: -15px;
  -webkit-animation: brush 1s;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: reverse;
  -webkit-mask-size: 295px 50px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url('http://megandalbey.com/codepen/css-selectors/strokemask.png');
  /* Mask animation unsupported by FF, and masks only supported in SVG format. */
}

@-webkit-keyframes brush {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 295px 0px;
  }
}

h2 + p {
  margin-left: 50px;
  font-weight: bold;
}


/* - - - - - NOTEPAD - - - - - */

.leather {
  background: url('http://megandalbey.com/codepen/css-selectors/leather.jpg') #6b3a0d;
  width: 520px;
  padding: 5px;
  margin: -5px auto 0px;
  border-radius: 5px;
  position: relative;
  z-index: 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px, rgba(0, 0, 0, 0.3) -1px -1px 1px inset, rgba(255, 255, 255, 0.6) 1px 1px 2px inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px, rgba(0, 0, 0, 0.3) -1px -1px 1px inset, rgba(255, 255, 255, 0.6) 1px 1px 2px inset;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px, rgba(0, 0, 0, 0.3) -1px -1px 1px inset, rgba(255, 255, 255, 0.2) 1px 1px 2px inset;
}

.leather-stitch {
  border: 1px dashed hsla(44, 84%, 36%, .8);
  padding: 7px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.2) 1px 1px 1px, rgba(0, 0, 0, 0.2) -1px -1px 1px, rgba(0, 0, 0, 0.3) -1px -1px 1px inset, rgba(255, 255, 255, 0.2) 1px 1px 2px inset;
  -moz-box-shadow: rgba(255, 255, 255, 0.2) 1px 1px 1px, rgba(0, 0, 0, 0.2) -1px -1px 1px, rgba(0, 0, 0, 0.3) -1px -1px 1px inset, rgba(255, 255, 255, 0.2) 1px 1px 2px inset;
  box-shadow: rgba(255, 255, 255, 0.2) 1px 1px 1px, rgba(0, 0, 0, 0.2) -1px -1px 1px, rgba(0, 0, 0, 0.3) -1px -1px 1px inset, rgba(255, 255, 255, 0.2) 1px 1px 2px inset;
}

.rings {
  margin: 5px 0px -28px 0px;
  padding: 0px;
  list-style: none;
  position: relative;
  z-index: 10;
}

.rings li {
  background: #442b4f;
  display: block;
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 15px;
  margin: -1px 66px 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) 1px 1px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) 1px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) 1px 1px 1px;
}

.rings li:before {
  content: '';
  display: block;
  border-radius: 15px;
  z-index: -1;
  position: relative;
  width: 7px;
  height: 35px;
  position: absolute;
  z-index: 10;
  margin: -25px 0px 0px 4px;
  background: #b5bdc8;
  background: -moz-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #b5bdc8 38%, #28343b 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #b5bdc8), color-stop(36%, #828c95), color-stop(38%, #b5bdc8), color-stop(100%, #28343b));
  background: -webkit-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #b5bdc8 38%, #28343b 100%);
  background: -o-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #b5bdc8 38%, #28343b 100%);
  background: -ms-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #b5bdc8 38%, #28343b 100%);
  background: linear-gradient(135deg, #b5bdc8 0%, #828c95 36%, #b5bdc8 38%, #28343b 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b', GradientType=1);
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4), -1px -1px 0px rgba(0, 0, 0, 0.3) inset, 3px 1px 0px rgba(255, 255, 255, 0.6) inset;
  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4), -1px -1px 0px rgba(0, 0, 0, 0.3) inset, 3px 1px 0px rgba(255, 255, 255, 0.6) inset;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4), -1px -1px 0px rgba(0, 0, 0, 0.3) inset, 3px 1px 0px rgba(255, 255, 255, 0.6) inset;
}

article {
  background: url('http://megandalbey.com/codepen/css-selectors/paper.jpg') #f2f1e3;
  display: block;
  position: relative;
  padding: 70px 10px 5px;
  color: #083354;
  border: 1px solid #FFF;
  width: 420px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
}


/* - - - - - EXAMPLES - - - - - */

pre {
  width: 92%;
  overflow: auto;
  margin: -10px 0px 10px;
  padding: 10px 8px 10px 12px;
  color: #3f3b36;
  border: 1px solid #e9e7e0;
  border-left: 13px solid #bce5be;
  font: lighter 12px/20px Monaco, 'MonacoRegular', monospace;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: url("http://www.megandalbey.com/codepen/css-selectors/precode.gif") repeat scroll 0 -9px;
}

pre:before {
  content: 'CSS';
  position: absolute;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  margin: 0px 0px 0px -28px;
  color: #7bb27d;
  font-size: 9px
}

xmp {
  width: 92%;
  overflow: auto;
  margin: 0px 0px 10px;
  padding: 10px 8px 10px 12px;
  color: #3f3b36;
  border: 1px solid #e9e7e0;
  border-left: 13px solid #d0e4f7;
  font: lighter 12px/20px Monaco, 'MonacoRegular', monospace;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: url("http://www.megandalbey.com/codepen/css-selectors/precode.gif") repeat scroll 0 -9px;
}

xmp:before {
  content: 'HTML';
  position: absolute;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  margin: 3px 0px 0px -31px;
  color: #7395b5;
  font-size: 9px
}

.example {
  width: 92%;
  margin: 0px 0px 10px;
  padding: 6px 8px 6px 12px;
  color: #3f3b36;
  border: 1px solid #e9e7e0;
  border-left: 13px solid #e1c9ea;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #FFF;
  min-height: 45px;
}

.example:before {
  content: 'EXAMPLE';
  position: absolute;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  margin: 18px 0px 0px -38px;
  color: #a077af;
  font-size: 9px
}

#e-1 * {
  border: 1px solid #00F;
}

#e-2 #red {
  color: #F00;
}

#e-3 .blue {
  color: #00F;
}

#e-4 a {
  font-weight: bold;
}

#e-5 p span {
  font-weight: bold;
}

#e-6 div>ul>li {
  border: 1px solid #F00;
}

#e-7 h4 + p {
  color: #F00;
}

#e-8 h4 ~ p {
  color: #F00;
}

#e-9 a[title] {
  color: #990;
}

#e-10 input[type=radio]:checked+span {
  border: 1px solid #F00;
}


/* - - - - - PEN - - - - - */

#pen {
  position: absolute;
  width: 42px;
  right: 12px;
  top: 80px;
  height: 476px;
  background: rgba(61, 33, 8, .2);
  padding: 20px 7px 5px;
  z-index: 0;
  border-radius: 30px;
  -webkit-box-shadow: 1px 1px 0px rgba(255, 255, 255, .1), 1px 1px 2px rgba(0, 0, 0, .3) inset, 5px 5px 30px rgba(61, 33, 8, .8) inset;
  -moz-box-shadow: 1px 1px 0px rgba(255, 255, 255, .1), 1px 1px 2px rgba(0, 0, 0, .3) inset, 5px 5px 30px rgba(61, 33, 8, .8) inset;
  box-shadow: 1px 1px 0px rgba(255, 255, 255, .1), 1px 1px 2px rgba(0, 0, 0, .3) inset, 5px 5px 30px rgba(61, 33, 8, .8) inset;
}

#pen:hover #metal {
  -webkit-animation: glow2 2s infinite;
  -webkit-animation-direction: alternate;
}

#pen:hover #hold,
#pen:hover #cart,
#pen:hover #cart2,
#pen:hover #cart3 {
  -webkit-animation: glow 2s infinite;
  -webkit-animation-direction: alternate;
}

#pen:hover #color {
  -webkit-animation: glow3 2s infinite;
  -webkit-animation-direction: alternate;
}

@-webkit-keyframes glow {
  0% {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .4), 0px 0px 0px rgba(250, 255, 0, 0), 0px 0px 0px rgba(250, 255, 0, 0) inset;
  }
  100% {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .4), 0px 0px 10px rgba(250, 255, 0, .6), 0px 0px 20px rgba(250, 255, 0, .5) inset;
  }
}

@-webkit-keyframes glow2 {
  0% {
    box-shadow: 3px 1px 1px 1px #5b4863 inset, 1px 1px 4px rgba(0, 0, 0, .4), 0px 0px 0px rgba(250, 255, 0, 0);
  }
  100% {
    box-shadow: 3px 1px 1px 1px #5b4863 inset, 1px 1px 4px rgba(0, 0, 0, .4), 0px 0px 20px rgba(250, 255, 0, .6);
  }
}

@-webkit-keyframes glow3 {
  0% {
    box-shadow: 0px 0px 0px rgba(250, 255, 0, 0);
    background: rgba(250, 255, 0, .6);
  }
  100% {
    box-shadow: 0px 0px 20px rgba(250, 255, 0, .6);
    background: rgba(250, 255, 0, 1);
  }
}

#cap {
  width: 42px;
  height: 121px;
  border-radius: 20px 20px 5px 5px;
  box-shadow: 2px 2px 2px rgba(255, 255, 255, .2) inset, 3px 3px 1px 5px #5b4863 inset, 1px 1px 4px rgba(0, 0, 0, .4);
  background: #1a141c;
  background: -moz-linear-gradient(left, #1a141c 0%, #9f7ca8 54%, #211727 75%, #211727 99%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1a141c), color-stop(54%, #9f7ca8), color-stop(75%, #211727), color-stop(99%, #211727));
  background: -webkit-linear-gradient(left, #1a141c 0%, #9f7ca8 54%, #211727 75%, #211727 99%);
  background: -o-linear-gradient(left, #1a141c 0%, #9f7ca8 54%, #211727 75%, #211727 99%);
  background: -ms-linear-gradient(left, #1a141c 0%, #9f7ca8 54%, #211727 75%, #211727 99%);
  background: linear-gradient(to right, #1a141c 0%, #9f7ca8 54%, #211727 75%, #211727 99%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a141c', endColorstr='#211727', GradientType=1);
}

#cap1,
#cap3,
#cap4,
#cap5 {
  width: 46px;
  height: 6px;
  border-radius: 5px;
  margin: 20px -2px -2px;
  position: absolute;
  box-shadow: 2px 2px 2px rgba(255, 255, 255, .2) inset, 3px 1px 1px 1px #5b4863 inset;
  background: #1a141c;
  background: -moz-linear-gradient(left, #1a141c 0%, #654e6a 42%, #ffffff 50%, #ffffff 66%, #654e6a 75%, #211727 79%, #211727 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1a141c), color-stop(42%, #654e6a), color-stop(50%, #ffffff), color-stop(66%, #ffffff), color-stop(75%, #654e6a), color-stop(79%, #211727), color-stop(100%, #211727));
  background: -webkit-linear-gradient(left, #1a141c 0%, #654e6a 42%, #ffffff 50%, #ffffff 66%, #654e6a 75%, #211727 79%, #211727 100%);
  background: -o-linear-gradient(left, #1a141c 0%, #654e6a 42%, #ffffff 50%, #ffffff 66%, #654e6a 75%, #211727 79%, #211727 100%);
  background: -ms-linear-gradient(left, #1a141c 0%, #654e6a 42%, #ffffff 50%, #ffffff 66%, #654e6a 75%, #211727 79%, #211727 100%);
  background: linear-gradient(to right, #1a141c 0%, #654e6a 42%, #ffffff 50%, #ffffff 66%, #654e6a 75%, #211727 79%, #211727 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a141c', endColorstr='#211727', GradientType=1);
}

#cap3 {
  margin-top: 102px
}

#cap4 {
  margin-top: 109px
}

#cap5 {
  margin-top: 116px
}

#cap6 {
  height: 90px;
  width: 10px;
  position: absolute;
  right: 3px;
  margin: 26px 0px 0px 0px;
  border-radius: 5px 50px 50px 5px;
  box-shadow: -1px 0px 1px 1px #1a141c inset, -2px 1px 3px 0px #FFF inset, -6px 3px 0px 1px #5b4863 inset, -8px 3px 1px 1px #1a141c inset;
}

#cap2 {
  width: 25px;
  height: 20px;
  border-radius: 20px 20px 0px 0px;
  margin: -14px 0px 0px 9px;
  position: absolute;
  box-shadow: 2px 2px 2px rgba(255, 255, 255, .2) inset, 2px 2px 1px 4px #5b4863 inset;
  background: #1a141c;
  background: -moz-linear-gradient(left, #1a141c 0%, #654e6a 54%, #211727 70%, #211727 99%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1a141c), color-stop(54%, #654e6a), color-stop(70%, #211727), color-stop(99%, #211727));
  background: -webkit-linear-gradient(left, #1a141c 0%, #654e6a 54%, #211727 70%, #211727 99%);
  background: -o-linear-gradient(left, #1a141c 0%, #654e6a 54%, #211727 70%, #211727 99%);
  background: -ms-linear-gradient(left, #1a141c 0%, #654e6a 54%, #211727 70%, #211727 99%);
  background: linear-gradient(to right, #1a141c 0%, #654e6a 54%, #211727 70%, #211727 99%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a141c', endColorstr='#211727', GradientType=1);
}

#hold {
  height: 282px;
  width: 40px;
  margin: 0px 0px 0px 1px;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.4)), color-stop(33%, rgba(255, 255, 255, 0.5)), color-stop(37%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0.3)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#4dffffff', GradientType=1);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}

#label {
  position: absolute;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  margin: 100px 0px 0px -35px;
  background: rgba(255, 255, 255, .4);
  padding: 3px;
  font-size: 14px;
  border-radius: 7px;
  color: #654e6a;
  font-weight: bold;
}

#band,
#band1,
#band2,
#band3 {
  width: 44px;
  height: 6px;
  border-radius: 5px;
  margin: 180px -2px -1px;
  position: absolute;
  box-shadow: 3px 1px 1px 1px #5b4863 inset, 1px 1px 4px rgba(0, 0, 0, .4);
  background: rgb(26, 20, 28);
  background: -moz-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(26, 20, 28, 1)), color-stop(42%, rgba(104, 104, 104, 1)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(66%, rgba(255, 255, 255, 1)), color-stop(78%, rgba(104, 104, 104, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: -ms-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to right, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a141c', endColorstr='#000000', GradientType=1);
}

#band1 {
  margin-top: 280px;
}

#band2 {
  margin-top: 305px;
  margin-left: 1px;
  width: 38px;
}

#band3 {
  margin-top: 325px;
  margin-left: 6px;
  width: 28px;
}

#cart,
#cart2,
#cart3 {
  height: 300px;
  width: 30px;
  margin: 20px 0px 0px 6px;
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  top: 130px;
  z-index: -1;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.4)), color-stop(33%, rgba(255, 255, 255, 0.5)), color-stop(37%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0.3)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 33%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.3) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#4dffffff', GradientType=1);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}

#cart2 {
  border-radius: 0px;
  margin: 170px 0px 0px 5px;
  height: 20px;
  width: 20px;
}

#cart3 {
  border-radius: 0px 0px 5px 5px;
  margin: 192px 0px 0px 9px;
  height: 11px;
  width: 13px;
}

#color {
  height: 180px;
  width: 28px;
  margin: 0px 0px 0px 7px;
  border-radius: 20px 20px 5px 5px;
  position: absolute;
  top: 160px;
  z-index: -3;
  background: rgba(250, 255, 0, .6);
}

#metal,
#ink {
  height: 150px;
  width: 30px;
  margin: 0px 0px 0px 6px;
  border-radius: 5px;
  position: absolute;
  top: 180px;
  z-index: -2;
  box-shadow: 3px 1px 1px 1px #5b4863 inset, 1px 1px 4px rgba(0, 0, 0, .4);
  background: rgb(26, 20, 28);
  background: -moz-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(26, 20, 28, 1)), color-stop(42%, rgba(104, 104, 104, 1)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(66%, rgba(255, 255, 255, 1)), color-stop(78%, rgba(104, 104, 104, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: -ms-linear-gradient(left, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to right, rgba(26, 20, 28, 1) 0%, rgba(104, 104, 104, 1) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 66%, rgba(104, 104, 104, 1) 78%, rgba(0, 0, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a141c', endColorstr='#000000', GradientType=1);
}

#ink {
  width: 7px;
  height: 290px;
  margin: 20px 0px 0px 18px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
  z-index: -4;
}

#ink:after {
  content: '';
  display: block;
  border-radius: 5px;
  height: 5px;
  width: 5px;
  margin: 290px 0px 0px 1px;
  box-shadow: -1px -1px 2px #000 inset, 1px 1px 2px #000 inset, 1px 1px 4px rgba(0, 0, 0, .4);
  background: #FFF;
}
            
          
!
            
              //Visit http://megandalbey.com
$('.tabs li').click(function() {
  id = ($(this).attr('id')).split('-');
  $('.tabs li').removeClass('current');
  $('section').removeClass('current');
  $('#t-' + id[1]).addClass('current');
  $('#s-' + id[1]).addClass('current');
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console