We want to target
this third list item here basically.
You see that this list item doesn't have any kind of ID,
or something which makes it easy for us to identify
this item, but still, with a specific selector type,
we have options to interact with this element.
For that, we go back to our code,
and here we now add a new selector type.
We want to select a specific list item,
therefore we use the list type selector,
and now add a colon, and now use first of type,
this one here.
This rule here, this selector, will allow us to select
the first list item inside our unordered list.
So what this basically says is,
I want to target the first list item I can find,
inside the parent element,
the parent here would be unordered list.
As a basic example, we could, for example,
add a different background color to this element,
let's say, here, yellow quickly.
With this you'll see that the first element here,
well, has this property applied.
Okay, nice, but not what we want,
we want to interact with the third element in here.
Back in our code, we can of course also achieve this,
I'll comment out this code here though,
because we have another selector type,
which allows us to specifically target
the specific element here.
Again, we target our list item,
but here we don't want to have
the first item here inside our unordered list.
Here, we want to have the nth occurrence of this item.
Go down here to the nth of type selector.
So, nth of type means simply that we have,
well in our case, eight list items,
and I can simply enter a number
which is matching the item that I want to select.
In our case, this would be the third item,
so in here, in the parenthesis, we add the number three,
and now we can again copy our background color property
and save this.
And going back, you'll see that now,
this third element is selected
and highlighted with our yellow color.
So this is the nth of type selector.
But how can we now make sure
that this element here occupies,
well, the entire space here?
To position an element inside our grid,
we have, again, various options to achieve this goal.
If you think about the grid logic though,
and what we've learned about it so far,
we have to tell our element
that it should occupy two columns, right?
Because we have a two column layout,
we cannot select this element,
so we just have to tell it,
well, please don't occupy this space in your column,
but also occupy this space in the second column.
We can do this,
by again, going to our rule that we just created.
And here, we'll now add the grid column property.
The grid column property now allows us to,
well, tell this element how many columns
it should occupy in the end.
In our case, this will mean that the element
should start in column one, then we add a dash,
and it should end where?
Well, in column two.
Okay, let's see if we do this,
does this change anything?
No, this is not working.
Again, we selected our grid option here, right?
This is important to have this activated.
And if we again look at these numbers I mentioned
at the beginning of this grid explanation,
you see, we have the number one, the number two,
and the number three for the columns.
So we have two columns, but three numbers.
This is due to the fact that our positioning
of the elements inside the grid relies on these numbers.
So this is position one, position two,
so basically, the first column starts at one,
it ends at the position two, the second column
starts at two, and ends at the position three.
If we follow this logic, then we would actually
have to tell our element that it should start
at position one and end at position three.
Let's give this a try and change one to three.
Yeah, now this working.
Now we have our third element,
and this occupies the entire space available.
This is not the only way to achieve this though.
We have other ways to tell the browser to do that,
and that's just what it is.
I just want to show you one additional way,
which you might come across.
Let's go back and instead of writing three here,
I'll add a span.
The span simply tells us, well,
how many columns are very important?
How many columns this element should occupy?
If we would add three again,
as we just had it and save this,
well then this would be kind of,
out of our grid, as you see it here.
It would be way too big.
If we go back and would add one,
then the element would just sit where it was,
because we just tell the element here to start,
sit here, to start at the position one.
So right here, and to span across well,
one column, which is basically all the space here.
But if it would change the one to two,
then we would have the same result
that we had at the beginning.
Now as I said, this is just the basics part,
you're only referring to columns.
You can also interact with rows in the grid,
and also of course, combined column and row logic,
and do a lot more things with this grid here.
For the purpose of this course,
at this point though, this is all we need
to create the desired layout.
You hopefully also saw why this is a lot easier
than creating this with the flex book logic.
And with that, let's go back to the project
and implement this on our own.