<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga maxime, assumenda cum quam porro consequuntur voluptatum repellat perferendis ullam, obcaecati, inventore quibusdam. Ducimus libero, voluptatem sunt aut blanditiis voluptatum necessitatibus.</p>
<!-- an ordered list -->
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<!-- an unordered list -->
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<!-- an interactive unordered list -->
<menu>
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
</menu>
@layer base, demo;
@layer demo {
:where(ol, ul, menu) {
padding-left: 0;
}
}
@layer base {
body {
padding: 3rem;
}
p {
max-width: 60ch;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.