Day: April 26, 2018

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.

Using GoMockingBird

Getting an account

If you do not have an account email me at

Using MockingBird

Go to and select the Final Projects project. Inside it you will need to create a page with your name. All sub-pages need to be dragged into your main page. See video below for detailed instructions!