Theory
Theory
Comments

Ordering elements with CSS

We can achieve an interesting effect by combining a flexbox and a trick with the :checked ~ selector.

The method works as follows: you can use the checkbox selector to control the order of flex items by changing the direction of the main axis using flex-direction. The effect works best when the direction of the main axis changes from “top to bottom” to “bottom to top”.

In this case, the flex container should be on the same level in the markup as the checkbox.

Thus, we can achieve CSS sorting without having to use JavaScript.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ordering elements with CSS</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <label for="sort">Sort by taste</label> <input type="checkbox" id="sort" name="sort" class="input-sort"> <ol class="sort-list"> <li><a href="/">Meat</a></li> <li><a href="/">Fish</a></li> <li><a href="/">Sour Cream</a></li> <li><a href="/">Milk</a></li> <li><a href="/">Cheese</a></li> </ol> </body> </html>

CSS

.sort-list { } .input-sort:checked ~ .sort-list { }

Goalscompleted

Assign a flexbox layout to the .sort-list block,
and set the direction of flow of the main axis to from top to bottom.
Set the direction of the flow of the main axis to from bottom to top when the checkbox state .input-sort is selected for the .sort-list block.

Toggle the checkbox to sort the list items.

Ordering elements with CSS

Comments

Log in

Sign up

Restore access