You are on page 1of 2

PSEUDO CLASSES

A pseudo-class is used to define a special state of an element. The syntax of pseudo-classes:


selector:pseudo-class {
property: value;
}

1. Match the pictures 1-7 with the pictures a-g

1__ 2__ 3__ 4__

5__ 6__ 7__

a b c d e

f g

2. Complete the text with the words from the table


3n add even formula nth odd parentheses siblings unordered value

Pseudo classes applied to a list

I’ll just make an 1____________ list and let's 2____________ 10 list item elements.

I am going to apply the nth child pseudo class. With these list items I would like to change the background of selected
elements. These list items are all 3____________ and what we're going to do is change the background color of a
selected element. We will select our list item and say that the 4____________ child will have a background color of
yellow.

So if you want the first child to have a background color of yellow, place the 5____________ of 1 as an argument
within the 6____________.
Let's say that I’d like all 7____________ siblings to be sky blue and all 8____________ siblings to be powder blue:

The next value is going to be a 9____________ that we can pass in as an argument. If I need every third element
highlighted, I will put 10____________ as an argument within the parentheses.

https://www.youtube.com/watch?v=fWnXVwULqrE&list=PLZPZq0r_RZOONc3kkuRmBOlj67YAG6jqo&index=8

You might also like