So in this video we're going to focus on three CSSA selectors.
Those are element ID in class.
So there are way more options for selecting elements.
We're going to learn about them later on we're just going to focus on these three to start.
And when I say selector think back to this general rule that we talked about early on when it started
CSSA a few videos ago where we have a selector and then curly braces and then some properties.
So we're going to see a few different selectors that we can put right here.
And the way that we're going to do that we're actually going to build a really simple to do list together
.
So I'm going to make a new file.
I'm going to save it and I'm going to call it to do list that HMO
once we have that then we go ahead and add the HMO.
And the way that it's going to work it's going to be an H1
and then we're going to have a well with allies.
But in each ally we're going to have some text and we're going to have a little checkbox so see if you
can remember how to do checkbox it's input type equals checkbox and then below that or after that we'll
have our text.
So we'll have walk rusty then I'm just going to duplicate this.
So then we'll have three of them here walk Rusty just to buy groceries.
And then lastly
finish recording see assess Phidias.
So if we open this up in a browser we're going to see a bland and styled version of our final product
but the skeleton is there.
We have our two do's and each one that's a little checkbox next to it.
OK.
So the next thing that we want to do is connect a style sheet.
So to do that this time let's start by connecting a non-existing style sheet and then we'll go ahead
and create a style sheet.
So some people would call this error driven development where we write something that we know won't
work and then we make it work afterwards.
So I'm going to call this to do the assess introduce C see assess which doesn't exist.
The next thing we're going to do is go ahead and make that file to Dewes that C assess.
And this does need to be in the same place as to do a study.
Tim I'll save that and just to make sure that it's connected.
Let's do something like body background orange just and you know this is actually what I was talking
about in the color video.
This is one of the only times I would really use a color like orange.
Aside from teaching I would just use it to make sure something is connected I just want a bright color
.
I want to see if this to use that C Ss is being referenced correctly here.
So if we fresh.
Okay great things are connected.
So what we're going to do is go back to the slides here and talk about the elements selector first which
is the one that we've actually devoted a lot of time to are ready.
It's basically the type of attacks as you specify div or paragraph or body and then it will select all
corresponding elements all instances that match that.
So in this instance we have two divs and each div has two paragraphs and so we set all divs that background
purple we get two purple device we set all paragraph to be COLOR YELLOW we get four yellow paragraphs
.
So that's what we're doing here when we select the body.
We could also do it for all ALWIS and give them a order or let's chirp border of two pixels solid red
.
Now of course that works on all allies.
OK.
So the next thing that we might want to do is single out one ally or one H-1 or one instance of something
.
So in this example we're selecting the third lie and turning it yellow.
And the way that we do that is actually by altering the team slightly and then using a hook that we
add to the H T M L and R C Ss all refer back to it and turn it yellow.
So the first step is to add that hook which is called an ID.
And so the way that an idea works you add it as an attribute to any element ID equals.
And then in quotes any name that you want it can be anything.
And then what we do is refer to that later by writing Octa Thorpe or hash sign and then the name of
the ID and that will select the of one element that matches that ID name.
So as an example let's say that I want this final ally here to look slightly different.
What I could do is go here Ally and let's give it an ID.
And this can be any name at all.
Let's just call this
special and the reason I'm saying I'm calling it special it's not really a great name but it does show
you that the point of using an ID is to single something out.
It is a way to target one individual element and one note about an ID.
It can only appear on a page one time.
So if I do this and then try and give the ID special to two elements that's actually invalid HMO.
So it's always supposed to be there one time on the page.
It's purely used to single a single element out.
We can however have multiple IDs on a page as long as they don't appear more than once.
OK.
So let's go with this special.
Now let's make this let's take a look at it here.
It's this last one here.
Let's give it a background color.
So to do that Id The name is special.
We go to our CSSA file and we write special and we put an octave up in front of it and that just tells
us that we're talking about an ID.
So then all we do is write or C S S in here so let's do background color and let's make it yellow.
Save the file refresh and you can see only this when it's yellow.
So there's a few things I want to point out.
The first is that this code is still working.
It turns all allies.
It gives them a red border including this one the final one.
And then we're adding on top of that by adding a yellow background only to the last one based off of
this hook that we added and called in ID.
So to sum up an idea as a way to single out an element you can only use an ID once per page but we can
have as many IDs as we want on a page.
So IDs are great to single out individual elements but oftentimes we want to have multiple elements
that look similar but we don't want all allies for instance.
So let's say I wanted to style half of the Allies one way and half of them another way we could use
a class to achieve that.
So the way that a class works it's just like an ID except it's called a class and we can apply it to
any number of elements on a page.
So as you can see here we're applying a class called the highlight to the first paragraph and the third
paragraph and then we refer to it in our success with a dot instead of an octave Thorpe.
So again to contrast that here to select an ID we use the hash sign or the octave Thorpe here to select
a class.
We use dot.
Otherwise they work the same way.
So let's do an example.
I'm going to add a class and the way that I want this to work we're going to pretend that these two
are checked off.
So I want there to be a line through the text.
So when we look at buy groceries and walked resti there should be a strike through going through this
text but not the last one.
So the way that we do that or one way to do that is with the class.
So on the fly I'm going to go ahead and add a class and it is going to call this completed and another
one class equals completed and I'm going to save that and if I refresh.
Nothing happens because I don't have any styles.
So now I go to my C Ss and I right dot and then the name of the class completed curly braces and now
style.
So I'm going to introduce something new here which is called text decoration and text decoration is
a way to add a line through.
But there are a few things that you can do.
You can add an underline and you can add a wavy underline Apparently I didn't know that a line through
and an over line which is just like an underline except on top.
So we're going to use line through and that should be it.
So if I refresh.
Keep your eye on these top two.
We now get a line through.
Great.
One quick note while I'm here is that if I want these checkboxes to be checked when the page loads.
So right now they're not checked and I have to manually check them but if I want the top two to be checked
I can go here and add in an attribute called checked.
And this works on checkbox inputs.
So by doing that if I were fresh Now when the page loads they're checked.
So let's not really see assess but it's important just to know that you can do that.
OK.
So let's wrap this up really quickly.
We have the elements selector to select all of a given element.
All ALWIS all divs all paragraphs.
We have the ID selector which will select the one element with the matching ID and we always need to
use an octave for that.
Or a hash symbol.
And then we have the class selector which is very similar to the ID selector except that we select based
off of a class name and a class can occur as many times as we want on a given page unlike an ID which
is only once