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.