CSS/Pagination

Implementing pagination purely in CSS is possible and simpler than in JavaScript, although functionally limited compared to JavaScript. It uses the :target selector and anchor links, where the default state of each page is being hidden. This gets overridden through :target on the selected page. The window might scroll to the position of the page container. No page is selected initially.

As of 2022, browser support for :target is wide.

Pages

• Page 1
|
• Page 2
|
• Page 3
|
• Page 4
|
• Page 5

Text of page 1

Text of page 2

Text of page 3

Text of page 4

Text of page 5

Style sheet

.page_container div { display:none; } /* hide by default */
.page_container div:target { display:block; } /* display target ID */
.page_container div:target ~ #page_1 { display: none; }

Toggle

If the goal is simple element toggling, the :checked selector can already fullfill the purpose.

In the label tag, the for parameter refers to the ID of the check box it corresponds to. The check box may be hidden, but the label remains functional.

Note that the HTML check box needs to be located above the content area.

HTML:

<label style="color:green;" for="check_box_demo_id">Show/Hide</label>
<input type="checkbox" role="button" id="check_box_demo_id" class="check_box_demo_class"></input>

Style sheet:

.check_box_demo_class:checked ~ .toggle_content_area { display:none }

This text can be toggled using the HTML and CSS code above.

See also

• JavaScript/Pagination