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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.