- [Chris] Hi, this is Chris Converse, and in this episode
we're going to make use of the first-of-type
and last-of-type properties in CSS.
This allows us to select and style
specific instances of elements within a parent.
And this is a great technique
for styling the beginning and ending
of a string of items, such as links,
which is what we're going to be doing in this episode.
Now, what I like most about this selector,
is that if enough another element is in the same parent,
it will have no effect on this selector,
because this selector is based on an element's type.
So if you'd like to follow along with me,
download the exercise files
and let's open index.html file in a text editor.
And now with the html file open,
down here we're going to be focusing on the anchor links
that are inside of a div with a class of more_info.
So we're going to be using the CSS selectors
to pick out the first item here,
and the last item,
but we don't want to add any additional html into here.
I don't want to add any ids or classes,
we're going to use CSS to pick out those items.
Now if you want to preview the page
we're currently looking at,
you can open the index.html file up in a browser,
and you can see these three links showing up here
after the content.
So to begin styling these, let's go back
to the exercise files, let's find style.css,
let's open this in our text editor,
and in the CSS let's scroll down to the bottom.
And so down here, we can see we're targeting the more_info
container which has the links inside.
We're actually going to make a small adjustment
to the more_info class later.
So scroll down after the more_info with the hover class,
and let's come in here and target the first anchor link
inside of the article more_info class.
So type article .more_info
then a space,
then an anchor tag and a colon, and so we're going to put in
the first-of-type, which is a structural pseudo-class,
which basically means that that item is selected
based on its relationship to, not only its parent,
but its siblings.
So after the colon, we'll type
first-of-type,
then a space,
put in our brackets, split this open,
and the first property we'll set here
will be the border top left property.
I want to have the first and last links have rounded corners.
So I'll type
border-top-left-radius
: space, and we're going to set this to 16px.
And now if we go back to the browser and preview this,
you'll see that the first anchor link in the more_info div
is the only one that has the top left rounded corner.
The other ones have square corners.
So let's go back to our CSS, let's duplicate that property,
let's change border-top-left
to border-bottom-left,
and now in the browser we have a nice rounded endcap
on that first item.
Let's go back to our CSS,
let's come in here and copy this entire roll,
so if you returns, let's paste it.
For the second instance, let's change first-of-type
to last-of-type.
And let's change border-top-left-radius
to border-top-right-radius.
And then for the second one,
we'll change this to bottom-right.
And now in the browser, we'll see that we have
our first link with rounded corners on the top left
and bottom left, and the last link has rounded corners
on the top right and bottom right.
So now with these changes in place,
the entire element now has these rounded corners,
so I want to change a few of the optics here.
I want to add a little bit more padding
on the right of the type on the last item,
and the left of the type on the first item,
and I also want to align this
so that the rounded corner here
extends a little bit to the left of this,
giving us more of an optical alignment.
So let's come back here to the first-of-type,
let's come in here and set padding-left.
We're going to set this to 19px.
Come in here and copy that.
Let's come down to last-of-type,
let's paste that down here and change padding-left
to padding-right.
Save our work.
Now in the browser, we have a little bit of extra space
on the left side of the first one,
and the right side of the last one.
And then back in the CSS, let's scroll up
to find the article .more_info.
Let's come over here to the margin left property,
and let's set this to -3px.
What that will do is take this entire element here
and just move it a little bit to the left.
So it more optically aligns with the rest of the content.
And then finally, let's go back to our html file,
let's add another link and make sure
that the rules are working properly.
So back in our html file, let's come down here
to the third link, which is Behaviour,
let's duplicate that,
and let's change that to In Culture.
Save our work,
and then back in the browser,
we can see that the last link is now picking up
the selector of last-of-type.
So the first and last-of-type gives us
a great way to style specific elements within a group,
without adding additional html markup to your web page.
Now, if you'd like to expand on these link styles,
maybe add a nice rollover effect,
check out our course on creating CSS animated rollovers
here in the library.
And so with that, I'll conclude this episode.
And, as always, thanks for watching.