So, you have made it to the final test.

You need to assemble a palette once again. And there is more than one!

This time you will need to deploy the entire arsenal of flexbox properties that you have learned. In addition, in order to complete this assignment, you may need to use multiple CSS selectors.

Hint. To select a color block in a particular palette, you can use the structural pseudo-class :nth-child(). If you have not used it before, the number in parentheses is the element's position among its siblings, starting at 1. In this task, the four .palette-box elements are siblings, so you can select color blocks in them like this:

.palette-box:nth-child(1) .color-2 { /* Color 2 in the first palette */ }
.palette-box:nth-child(2) .color-2 { /* Color 2 in the second palette */ }
.palette-box:nth-child(3) .part:nth-child(1) .color-1 { /* Color 1 in the first part of the third palette */ }
.palette-box:nth-child(4) .color-2 { /* Color 2 in the fourth palette */ }

In the third example, .palette-box:nth-child(3) selects the third palette, and .part:nth-child(1) selects its first part. The final .color-1 selects the color block inside that part.

Replace the color class with the class of the block you want to style, and add the required CSS properties inside the braces.

This chapter is the first installment in our flexbox series. We hope to see you again in the following chapters. To be continued!