Hi, today we're going to be talking about advanced selectors.
Up until this point, when we've been writing our rules,
we've been writing our rules for a specific type of tag.
We've been saying h1 or p or h2.
So we've really just focused on one thing that covers all the different elements of
that type.
But what if you don't want to style all of the links, just some of them?
Or you don't want to style all of your lists,
you just want to style some of them?
Well, now we're going to talk about these type of advanced selectors
that will let us do just that.
CSS is going to give you so many options that in this lecture I'm going to try to
cover as many as I can, but it's still going to be up to you to go off and
look up some more on your own as you need them.
So let's start with the CSS selectors that follow the DOM.
If you remember the document object model
is how the browser breaks up your page into a tree-like structure.
So in this way, the browser actually knows if a paragraph comes directly after an h1
tag or if two paragraphs are siblings in the same section.
We're going to utilize that to style just certain parts of your page.
So descendant selectors are a way to say, hey, if you're inside a nav tag,
I want you to style all the links that are inside the nav tag.
Instead of doing all of them, just those ones.
If you wanna be even more specific, you can use the child selectors.
This rule is very similar, except it says,
all the a links need to be what we call direct descendants of the nav link.
If you have a paragraph in there and you have some links in there, ignore that.
They need to be directly underneath each other.
The final one is adjacent sibling.
That’s not one I actually use very much in my own coding, but
I wanted to let you know what it is because there’s a really good chance
you’ll see it if you’re looking at other people’s code.
How the adjacent sibling works is that the elements must be
what we call the same level and follow each other.
So if you have a section that has an h1 and
then an ordered list, they would be siblings.
If you had an h1 and then some other things and
that ordered list was inside a paragraph, it wouldn't work that way.
Next, we're going to talk about what we call id selectors.
ids are used to identify a single element in the DOM.
The way ids work is that you would go in, and
you would, in your HTML, say something along the lines of id equals header, or
id equals footer is one they used to use a lot.
Then in your style sheet, using the pound symbol,
you can identify which ones that you want to style.
So right now, there's a small movement, but
it's growing a little bit, to move out of the use of id from CSS.
They're saying there's really no point in using that because a lot
of people just really use this id for JavaScript and things like that.
But again, this is something you're going to be seeing a lot, so
I want to introduce you to it.
So let's see an example really quickly here just on the screen of how it works.
In my HTML, I would go ahead and put in my source, my alt tag,
but also id="mainLogo".
Then, in my style sheet, using the # symbol along with the id name,
the browser's going to know, oh, whenever I see one of those images,
I wanna make sure I add this border and this margin.
Class selectors are similar to ids, but the difference is, that classes can
apply to a range of elements, not just one particular element in the DOM.
So, think of thumbnail images or the social icon medias.
It's this idea that, you know what,
I wanna be able to style a big group of things all in the same way,
but I don't want to necessarily style all of them that way.
You don't want all of your images to be thumbnails,
but you want a lot of them to be.
You would write this code in a very similar manner.
Over here in my HTML, I have class="thumb", class="thumb",
class="thumb".
And in my CSS, instead of using the #, you need to make sure you use the period or
dot, along with the class name, and then you can give it any rules.
And this way, the page is gonna go through and know that in addition to
any styling you just put on images, you also want this styling for the thumbnails.
So just to try to help you make it a little bit more clear,
what's the difference between using classes and ids?
Well first, you wanna make sure you know the syntax.
The period is for classes, and the pound is for ids.
You can't mess up on this, because the browser will not fix it for
you if you put the wrong thing in front of your class or id name.
You wanna remember that classes can be used multiple times.
It makes sense in your HTML code to see class="thumb", class="thumb",
class="thumb" because it's not supposed to be a specific part of the page.
With ids, it should be unique, you should only see id equals, for
instance, header, which we're not even using once.
You should only see id="main section" once.
So again, let's think of images and navigation bars.
It's very common that you wanna format numerous, but
not all the images the same way.
And you would use classes for that.
Where you might use an id is, I'm sure that you've been at some places where on
the webpage, you see the navigation bar, and
the page that you're currently on is styled just slightly differently.
And that makes sense because you can only be at one page at a time, and
that's why you might choose to use the id.
So let's go ahead and go through a quick example using that navigation bar.
So here's a sample HTML file,
where all I've done is put in four links that don't even really go anywhere.
I've commented out the style sheet just so
you can see what it would look like without any styling.
You can see, I've got my Home, Interests, Resume, Hobbies, and
I have one additional link down here that I very badly called here.
So let's go ahead and
try adding a little bit of styling using these advanced selectors.
Go over here.
You can see that I've used the child element of, actually,
just kind of the descendant of, hey, all the links that are in the navigation bar,
I want to style differently, I wanna give them a different background color,
a different width, things like that.
In addition, anything that's class current, I want to make even different
than any other link or anything else we've seen that way.
So let's go ahead and uncomment the style sheet.
Save it.
Go from this to this.
You can see that only the links that are inside my navigation bar are styled.
This one was left the same.
And the one where I have class="current" does look different from the others.
So it's really simple to use these things, you just need to know about them.
As your pages get more advanced,
you're going to want to narrow the scope of some of the rules.
We only wanna apply them to certain things.
And one of the notations you can use for that is the dot.
So in your style sheet, you would actually have p.main.
This means go and find all the paragraphs that are using the class main.
Or you might have header img.special.
This would mean find all the images that have image classical special
that belong in the header.
It's just a way for you to really reduce what's being styled.
On the same hand, you can also, what we call, expand the scope.
So, let's say that there's some sort of styling you want to apply to both
the header and the footer, or to the sections and the articles.
Not a problem.
What you do is you just write the element,
and you include a comma right there to let it know.
So just as a quick review.
And this is something from much earlier.
You need to think about what happens when there are multiple rules for
the same selector.
So you might have this one up here with the paragraph where it has certain
qualities it wants to share between paragraphs h1, the id main, and
the class special.
But later, if you wanna have additional styling for
a paragraph, as long as you put that somewhere below,
it's going to override and combine with anything that's higher up.
So unless a rule has the exclamation point important after it, it always
just uses the last one it saw, along with the earlier ones that don't conflict.
In addition to the element selectors and the different DOM relationship selectors,
we also have a few more that I want to talk about briefly.
The first one is the universal selector, which is the star or
the Shift eight on your keyboard.
What this one does is,
it'll apply your styling to every single element on the page.
It's absolutely crazy.
I'm not gonna do it.
I'm gonna let you do it, but go ahead and put in a star, and then the style,
maybe border, around every element.
It affects everything on your page.
Sometimes, it's nice for debugging.
The next one you might wanna think about using are what we call
attribute selectors.
Instead of going on the tags, you go on the attributes that go inside the tags.
So in this case, it would go ahead and it would wanna style every link where you
have href="info.html", and I'll do a quick example of that in just a second.
But before I do that, I wanted to mention two more that we'll be looking at later,
which are pseudo-classes and pseudo-elements.
Just another level of distinguishing just certain things you wanna style
on your page.
But first, let's go ahead and look at using these attribute selectors.
So the way that attribute selectors work is that they search the DOM for
elements that have the attribute that you are looking for.
So, for instance, you might wanna look all the images that use gif files or
all the images that have empty alt text or maybe
all the links that go to government sites or non-profit sites or educational sites.
It's really easy for us to find those and go ahead and
style them a little differently.
How we do that is that we use operators to
match the different parts of the alt text that you're looking for.
So up here, in what we call the caret, it's going to match the beginning.
So in this case, it would match all those links that start with http://umich, and
it doesn't matter how it ends.
The next one with the dollar sign is going to match the end exactly.
It's going to find every file that ends in .png.
We also have the wildcard, where you're going and
saying if you see umich in any part of any hyper reference at all, apply this rule.
So what we're going to look at is we're going to look at a file that has different
links And each one has a different type of extension that we wanna style differently.
All right.
So what I have here is just a list of links.
There's no classes.
Nothing special about these, that goes to different university sites, organizations,
government sites, and if you take a look, by default, it's just gonna show up as
your traditional blue links with underlined, the text right there.
But what I want to do is I want to go in and say,
you know what, all the ones that end in .org?
Make them one color.
All the ones that are .edu, another color, and
all the ones that end in .gov, a third color.
Let's see what it looks like.
Here, you can see that without me having to put in any information inside the tags
themselves, the browser has colored them the proper color.
Okay, I've just covered a lot of stuff in a very short video.
You need to realize that these ideas are gonna merge together.
You're gonna be using classes,
you're gonna be using ids, you're gonna be using attributes.
And the important thing I want you to know is that when you
are adding all these things together, the order that you write classes and
different ids in your text doesn't matter.
It doesn't matter whether you have special early dark or dark early special.
What really matters is the order that you write your rules in your style sheet.
Browsers are always going to start to the top, and apply each rule.
Now the good news from this lecture is that I want you to realize
that with the power of classes and ids and this cascading style sheet is
that this means you can use style sheets from other people to style your code.
And you can just add a class that changes the one little attribute
that maybe you didn't like about it.
You can override these style sheets and make it your very own.
Just make sure that you link your style sheet last.
All right, we've covered a lot, and
I'm hoping I didn't overwhelm you with the video.
I just want you to remember that when we do type selectors and
the kind of things that I'm gonna have you do in this class is that we usually
are adding them to narrow the scope of where rules are applied.
So we don't wanna style everything.
We only wanna style certain things.
An id is used to specify a specific element in a page, and
classes are used to associate elements that really tend to have the similar look.
So as we go on, I know I'm gonna have some code-with-me examples.
I hope you'll stop, get out your laptop, and
really code with me to get an idea of how powerful these different things can be.
Thanks.