[Deep Dive]

[CSS Fundamentals: Structural Pseudo-classes with Guil Hernandez]

CSS added powerful pseudo-classes

that allow us to select elements based on their positions in a document tree.

In this video, we'll go over these advanced structural pseudo-classes. So, let's get started.

I've set up two HTML files for our examples

that link to a style.css file that I created just to get us started.

We'll be adding our new pseudo-classes and a separate file named pseudoclasses.css.

First, we need to understand how nth-child works.

Nth-child is the most useful and one of the most powerful structural pseudo-classes available.

It selects elements based on their positions within a parent element's list of child elements.

In our HTML, we have an unordered list which we'll use as our parent element.

Nested inside the unordered list are 10 list items.

I've added some styles to the list to help illustrate how nth-child works.

For this example, we'll be selecting different list item child elements

base on their position in the unordered list.

Nth-child uses a function line syntax that allows an argument to be passed in between parentheses.

Inside the parenthesis is where we declare how the element will be selected.

One of the arguments that can be accepted in between the parentheses

is a keyword of odd or even, which can be used to select every other child element.

So here we'll specify that we are selecting a list item,

and we will give it a color property and a background color.

When we refresh the page, notice how only the list items

with the even numbers have the styles applied.

If we change it from even to odd and refresh the page,

now only list items with odd numbers are selected.

Another argument that we can use in between our parentheses is an integer.

So for example, if we use the number three,

notice how only the third list item inside the parent ul is selected,

and if we replace it with a value of nine,

now the ninth list item is the one selected.

What makes arguments really powerful is when using expressions

to select the particular combination of child elements.

Expressions are a little more complicated, but as we'll find out shortly,

they are not so bad once you start experimenting with the numbers.

Our basic expressions syntax looks something like this: an + b.

The values a and b are always represented by integers, and the value n does not change.

Let's go over what these values mean.

Starting from the right, the b value is an offset value that determines the first element selected.

If we make this a value of three, this means that the third list item

would be the first one selected in our list--ignoring all sibling list items that precede it.

The a value determines the cycle of elements to select after the first one has been selected.

If we make value 2, this means that the third list item will be selected first,

then it will select every second list item after that.

Now the n value doesn't change in an expression.

We can think of n as a counter that starts at zero and it indicates the a value to the browser.

Let's see how this works.

When we refresh the browser, we'll see that the first list item selected is the third,

which was determined by our b value, then it selects every second list item

until there are no more list items to select.

If we change our expression to 3n + 4, now we see that the 4th list item is selected first

then every third one after that.

They are a few more things to remember when using expressions.

For example, if the a value is represented by the number 1,

such as in 1n + 3, you can actually omit the a value as it will be the same as using n+3.

This selects the third one first, then every list item after it.

If the b value is a zero like in 3n + 0, we can actually omit the b value

as it's the same as using 3n, which selects every third list item.

Finally if the a and b values are the same like in 3n + 3,

then we can go ahead and omit our b value

as it will also be the same as using 3n in our argument.

We can also use negative values in our expressions.

What if we wanted to select the first five list items only in our unordered list?

In our css, we can use the expression -n + 5.

This will select the 5th list item first, then all others above it.

When we refresh the browser, notice how just the top five list items are the only ones selected.

If we were to change it to -n + 3, now the first three list items are the one selected.

Another type of structural pseudo-class is nth last child.

Nth last child works much like nth-child except that it starts counting from the last child.

In our expression, if we use 3n + 1,

when we refresh we can see how it matches the last list item in the selection first,

then every third one going up the list.

We can get even more specific and apply styles only to particular types of elements.

For example, the nth-of-type pseudo-class selects an element base on its position

within a parent elements list of child elements of the same type.

Now, this is a more flexible and useful pseudo selector.

If you want to be sure you're selecting the same type of element no matter where it is

inside the parent element or what other elements appear before it.

For this example, I've set up another HTML page containing sibling heading, divs,

and a paragraph element that are all children of the body element.

I also added a few styles to make the divs appear as boxes.

Now if we only want to select and style these div boxes on the page in our css,

we will need to specify the div element first followed by nth-of-type and then the argument

For our argument, let's go ahead and select the second div,

and we will apply a background color of blue.

We'll refresh the page and see the styles applied only to the second div.

If we wanted to style every other div, then we can change the argument from two to odd.

Now you see that the odd number divs are the ones selected.

In our markup, even if we add more sibling elements before and after our divs here,

notice how the div elements are still the only ones selected, because with nth-of-type

we specifically instructed the browser to select the odd div child elements of the parent.

We can also use nth-last-of-type, which works much like nth-of-type

except that it start counting from the last child.

If we change odd to the number 1 for our argument,

when we refresh you see that it starts counting from the last child.

Now, if we go ahead and change it from 1 to 3,

notice that the third div from the last of this type is the now the one selected.

The last one we'll cover is useful for selecting an element

that is the only one of its type and its parent element.

In our markup, notice how there is only one heading one and one paragraph element.

They are the only ones of their type in the document.

In our css, we'll create an only of type selector

and here, we will specify a color of blue.

When we refreshed, we see how the h1 and the paragraph are selected,

because they are the only elements of their type within the parent body element.

Now, if we specify the paragraph element,

now it only selects the paragraph element that's the only one of its type

within the parent element.

In our markup, if we add a paragraph as a child element of one of our divs,

notice how the new paragraph also gets selected and styled

because it's the only element of its type within the parent div.