Course Content
CSS Fundamentals
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
.
index.html
index.css
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.
index.html
index.css
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 with0
and increases by1
on each iteration;b
is offset;
index.html
index.css
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:
index.html
index.css
index.js
What pseudo class can be used to select first element in the set of elements?
Select the correct answer
What is the nth-child selector used for?
Select the correct answer
How does the last-child selector work?
Select the correct answer
Everything was clear?