Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente facilis aperiam saepe modi quis totam sed reiciendis eaque sit adipisci. Voluptatem, perferendis distinctio quos quod dolorum error quisquam recusandae libero.</p>
  <p>Velit commodi sapiente laudantium eos porro dolorum ipsam similique explicabo soluta nemo facere obcaecati quibusdam, praesentium incidunt architecto voluptate nobis. Praesentium placeat, ex suscipit at eaque autem distinctio sed rerum!</p>
  <p>Omnis corporis incidunt accusamus ut. Facere corrupti eaque, similique repudiandae quos odit dignissimos voluptatum vero reprehenderit! Nam ducimus quia ut, perferendis numquam consequatur veritatis sit voluptates eos molestias assumenda reprehenderit!</p>
  <p>Eius esse laudantium dolores, vero ad culpa modi veritatis aut dolore unde fugit quisquam excepturi exercitationem ratione ex quidem rem et doloremque! Odio magnam assumenda repudiandae. Magnam nobis veritatis nostrum.</p>
  <p>Est ipsum inventore dolores perferendis accusamus expedita pariatur, necessitatibus cum eaque, sapiente alias possimus! Vero, tempore aliquid ducimus dolore laboriosam accusantium illo hic unde sit in quod iste eum totam.</p>
  <p>Asperiores beatae sapiente repellat! Ullam neque non fuga tempora ratione excepturi beatae in consequatur, perferendis illo nam earum voluptas maiores? Assumenda molestiae veritatis maxime obcaecati enim? Odio cum itaque porro!</p>
  <p>Culpa cumque eos nam nesciunt eaque! Blanditiis, necessitatibus repellat quo ad quia quos cum sapiente consequuntur? Possimus distinctio id enim porro soluta quae neque, eveniet, cum consequatur nulla facere similique?</p>
  <p>Ipsa, placeat ab. Eius temporibus consectetur, earum omnis quia deserunt ducimus illum. Omnis eius voluptate veniam praesentium minus quibusdam, ab ducimus, voluptatem in totam odit quos nihil sed! Molestiae, quisquam!</p>
  <p>Eius animi adipisci debitis excepturi molestiae dolorem incidunt dolores commodi sint laboriosam. Non, ad! Quidem assumenda, earum, reiciendis molestiae a hic in sunt nesciunt nostrum fugit praesentium debitis eius labore.</p>
  <p>Quisquam, cumque vitae sit unde beatae delectus nam atque odit alias temporibus dolorum eaque sint mollitia dignissimos! Maxime maiores nulla unde consequuntur excepturi rem. Iste dolore fugit voluptatibus earum delectus.</p>
</div>
              
            
!

CSS

              
                p:nth-child(6n + 1)::selection {
  background: hsl(0deg, 100%, 77%);
  color: hsl(0deg, 100%, 16%);
}
p:nth-child(6n + 2)::selection {
  background: hsl(33deg, 100%, 79%);
  color: hsl(33deg, 100%, 18%);
}
p:nth-child(6n + 3)::selection {
  background: hsl(56deg, 100%, 79%);
  color: hsl(56deg, 100%, 18%);
}
p:nth-child(6n + 4)::selection {
  background: hsl(120deg, 78%, 90%);
  color: hsl(120deg, 78%, 29%);
}
p:nth-child(6n + 5)::selection {
  background: hsl(217deg, 100%, 90%);
  color: hsl(217deg, 100%, 29%);
}
p:nth-child(6n + 6)::selection {
  background: hsl(261deg, 78%, 66%);
  color: hsl(261deg, 78%, 5%);
}

p {
  max-width: 700px;
  font-size: 18px;
  text-align: center;
  margin: 0 auto;
  padding: 10px 0; 
  font-family: cursive;
}
              
            
!

JS

              
                
              
            
!
999px

Console