course content

Course Content

CSS Fundamentals

Structural and functional pseudo-classesStructural and functional pseudo-classes

These pseudo-classes pertain to the position of an element in the document's hierarchical structure.

first-child pseudo-class

:first-child targets an element that is the first child of its parent element, regardless of its tag name or class name. Let's consider the following example to make it clear. We have a set of some elements and only for the first element (first <li> element) we need to make its color property equals to blue.

html

index.html

css

index.css

js

index.js

We see that the first element was selected, and only for it we change the color property.

last-child pseudo-class

:last-child targets the last child and we can change any its property.

html

index.html

css

index.css

js

index.js

nth-child pseudo-class

:nth-child targets the element based on its position in the hierarchy. It accepts an argument in the form of an expression, which determines which child elements to select. We use an+b loop.

  • a is loop period;
  • n is loop counter, starts with 0 and increases by 1 on each iteration;
  • b is offset;
html

index.html

css

index.css

js

index.js

Let's consider some typical selectors.

Note

We don't need to remember all the selectors. We can always search it in Google.

not() pseudo-class

:not() targets elements that do not match a given selector. For example, :not(p) would match all elements that are not <p> elements. Let's run the next examples:

html

index.html

css

index.css

js

index.js

1. What pseudo class can be used to select first element in the set of elements?
2. What is the nth-child selector used for?
3. How does the last-child selector work?

question-icon

What pseudo class can be used to select first element in the set of elements?

Select the correct answer

question-icon

What is the nth-child selector used for?

Select the correct answer

question-icon

How does the last-child selector work?

Select the correct answer

Everything was clear?

Section 3. Chapter 5