Advanced CSS Exercises

Selecting all matching children

When creating a selector, if you add a space after the first selector it will then select all children that match the second selector you specify.

Select immediate children

Selecting only immediate children is done with the > character between two selectors

Selecting multiple selectors

To select multiple selectors you use the , character between each selector.

Selecting multiple elements with one class

Very often we want to apply the same styling to a number of elements, instead of selecting multiple selectors we just add a new class to each element we want to be selected.

Colors and Sizes

We’ll set a global font-size and then based on it we’ll adjust different font sizes and spacing. We’ll also apply some transparent colors and text colors.

Pseudo Elements

We’ll need to apply a hover effect by using the :hover pseudo element. We’ll also need to select the first, third, and last .child element of .parent by using the :first-of-type, :nth-of-type, and :last-of-type pseudo selectors.

Using LESS

We’ll use the main abilities of LESS by adding a selector inside an element that selects that element and adds a pseudo :hover selector. Then we’ll apply a style to a child of .parent by using the nesting properties of LESS and apply a variable form LESS.