In this video we're going to go over a solution to the CSSA selectors problem set.
And I'm just going to go over every problem from the top down.
So feel free to fast forward if there's just one or two that you had trouble with.
So we did the first one together in the initial video give the body element a background of this color
.
So we just say body background is this color save for us.
Let's go ahead and load it up in the browser refresh and you can see we get a gray background.
So the next one is make the H one element this color.
So same thing except rather than background we just said colored.
We save inheres or H-1 it turns purple.
Remember if we had more than one H-1 on the page they would all be purple.
So this next one is make all H-2 elements orange.
So exact same selector as the above two.
And then to make it orange I'm just going to use the built in orange color but you could use any other
color system and you can see we get every age to those four of them.
They turn orange.
So next up we're going to shift this over to the side make all ally elements blue.
Pick your own hexadecimal blue.
So to do that we select all allies and then we give them a color and we're going to do a hexadecimal
blue.
So you could put anything here as long as it's more blue than anything else.
So remember the first channel is red then the next two are green.
So we'll do a little bit of green let's do and then a bunch of blue.
Save that and let's take a look at the Allies and you can see we get blue lights.
So now change the background on every paragraph to be yellow.
It's just one more where we select every element of a type.
So all paragraphs background yellow save and we get a bunch of yellow paragraphs.
Next up select all inputs and give them a three pixel red border.
So input border and there's a few ways of doing this we can do it all at once.
Order three pixel solid red
and you can see our two inputs have a prefix or solid red border or we could do this separately border
color red
border with is three pixels and finally border style is solid for pretty obvious reasons.
It's a lot easier to do this.
But occasionally you'll want to do this when you get to javascript.
We'll want to just update one part.
So when a user hovers over something you want to change it from a red border to a green border.
Well we might just want to change the color and we can leave the with in the style how they are.
So I'm going to leave it like this.
Next we're now moving onto the class selector.
So give everything with the class Hello.
A white background.
And if we look at the h t m l there's actually just one thing.
This first paragraph inside this div with class.
Hello.
So we select that class dot.
Hello background white.
And you can see we get this paragraph here.
It turns white.
Next up give the element with ID special a two pixel solid blue border.
Pick your own R.G. be blue.
So same thing again this time instead of a dot we use the hash sign or the arc to Thorpe and then that
name of the ID she can see again is right here Id especial.
And then we want to give it a two pixel solid border so to pixel solid and then R.G. be blue.
And so will have 0 red 100 green 200 blue and if we are fresh that you can see we get it's pretty slight
but a 2 pixel blue border around this paragraph with the ID.
Next up make all the paragraphs that are nested inside of divs 25 pixel font and the hint is use this
property font Dasch size 25 pixels.
So what we need to do here is rather than select all paragraphs we only want paragraphs that are inside
of a div so you can see there are some like this one here that is not inside a div.
We don't want those to be 25 pixels in font size.
So we use this descendants selector where we say div and then inside of that div all paragraphs so paragraphs
that live in any div doesn't matter which div just any paragraphs in any divs will select them and give
them font size 25 pixels save that refresh and you can see that these all get bigger but these ones
that say paragraph not inside a div don't get bigger because they're not instead of a div Next up make
only inputs with type text have a gray background.
So this is another type of selector and it's based off of an attribute.
So the attribute you want to do is find where type is equal to text.
So basically just this input right here type equals text.
And so the way that we do that we're going to type input and then square braces and yep square braces
.
And then inside of there the attribute which is type and we're looking for where it's equal to text
and then we're just going to say background gray.
And then if we scroll down here and refresh keep your eye right here you can see we get a gray background
.
So again this one is useful if you want it to select all links that went to Google.
We would select based off of H.F. or we could select off of any other attribute out there.
So next up give both paragraphs inside the third div a pink background.
So this one gets a little bit crazy.
So let's take a look at the HMO.
Here is our third div..
The first one is here.
The second one is here and the third one is here and there's two paragraphs and we want to select both
of them and give them a pink background.
So what we did before was select all paragraphs inside of all divs that won't work here.
What we do what we do want to do is select all paragraphs inside of the third div on the page.
And the way that we can specify the third div is to use end of type.
So we'll say div and of type 3.
So that's going to give us a third div and then instead of that all paragraphs and then we're just going
to say background is pink and save refresh and let's double check.
Here's our first div.
Here is the second div.
And here's the third div.
Start to paragraph start with cardigan and I'm the second paragraph.
There we go cardigan.
I'm the second paragraph.
Next up give this second paragraph inside the third div a five pixel border white border.
So this one is very similar except we only want the second paragraph inside the third div.
So just this one.
So we do the same thing where we select the third div and of type 3 and then rather than all paragraphs
we're then going to do paragraph and of type.
And we want the second one so we can combine them.
This is going to select the second paragraph instead of the third div and we want to give it a 5 pixel
white border border 5 pixel solid white.
There we go.
Here's our five pixel solid white border on the second paragraph in the div.
Not the first one.
Next up make the E-M in the third div element white and 20 pixel font.
So that's this E-M right here cronut skateboard.
If you don't know Krown it is it's very delicious.
Maybe overrated.
Definitely overpriced pastry out of New York City.
It has a doughnut and a croissant.
So definitely at home instead of the hipster ipsum vocabulary here.
And we're going to take that E-M and we're going to make it white and 20 pixel Swan.
So just like before we had to select the third div
and then just the E-M inside.
And this will select all IEMs and it just happens that there's only one.
But if there were more than one we might want to say E-M first of type or E-M instead of a paragraph
but I'll just leave it as this for now.
And we want to give it white to color and 20 pixel font color white and font size 20 pixel.
And just to remind you we are going to spend time talking about fonts and font size and a bunch of other
things in future videos.
There we go.
It's white and the font size changes.
So now we're onto some of the bonus exercises which are some of my favorite.
There are some of the more obscure the more interesting ways of selecting things and manipulating them
.
So to start.
Let's look at making all checked checkboxes have a left margin of 50 pixels and I gave it to you.
You need to use margin left for 50 pixels.
So there's a selector to select elements that are checked.
And it just looks like this.
It's a pseudo selector just like nth of type.
So we need to say what we're looking for that's been checked.
So I'm just going to say all inputs that have been checked because remember that checkboxes are input
type equals checkbox there are other elements that can be checked though mainly the radio button.
So this would also select any radio buttons that have been checked and that's fine for now.
So it looks like this input colon checked.
And what we want to do is use margin left fifty pixels.
So this is a little preview of what we're coming up on in some of the future videos when we add this
and it's going to add some space on the left side of the checkbox so you can see the ones that are checked
moved over.
Now if I check this one now this is checked and it moves over to the right 50 pixels.
If I uncheck them and move back over to the left.
So that's checked.
The next one.
This is probably my favorite.
Make the label elements all uppercase without changing the HMO.
So I mentioned you'll definitely want to look that one up and that's because we definitely haven't gone
over this.
So to start let's just select all label elements and then let's say that I don't know how to make them
uppercase without changing the HMO.
So let's pull up Google and do a search and this is something that I definitely had done before.
So let's go up and do a search see assess upper case you can see the first thing that pops up is text
transform and text transform it says it specifies how to capitalize in elements text.
It can be used to make text appear in all upper case or all lowercase or with each word capitalized
.
So then we scroll down and take a look at the syntax and it looks like we have capitalize.
Will capitalist's first letter upper case and lower case.
So we want uppercase.
So text transform uppercase.
And what I just did there was not just to show you something it's actually something that I do all the
time which is looking things up going to Google typing C Ss blah blah blah CSSA upper case C S S transparent
whatever I'm looking to do.
And I just look at the search results because there are so many properties to recall.
You can not remember all of them.
So this is one of the more obscure ones.
Definitely.
And if we refresh this is for labels which are down here.
So let me just get rid of that just to show you our time.
These are the labels.
And then we add this in and refresh their upper cased.
So next up we have make the first letter of the element with ID special green and 100 pixel font size
.
So to target the first letter that's another one that we might want to look up SEUS us first letter
and see what we get.
So it looks like there's another pseudo selector.
The first letter C Ss element selects the first letter of the first line of a block.
So if you take a look an example first letter.
Let's go ahead and try that.
We want to first select the ID special and then first the letter of that.
And we want to make it green and 100 pixels in font size so color green and font size 100 pixels save
and that element is right here.
So keep an eye on the first letter we refresh and we get this giant green eye.
Next one make the H-1 elements color changed to blue when hovered over.
So this one is actually pretty common to have some sort of effect.
When you hover over something usually it's pretty subtle maybe a button and you hover over it and there's
a small shadow that appears that the color shifts very slightly to look like you know some sort of 3-D
perspective for something to give you just a little bit of interactivity without being distracted distracting
.
So we're going to select the H-1 And this actually is all each one.
But in this case it's only one and the pseudo selector is hover and whatever we put in here is only
applied when a user hovers over the element.
So color blue we save.
Here's our H-1.
And if I hover turns blue when I stop hovering it goes back to whatever it had before.
So finally make the elements that have been visited gray and as he can see the two elements these two
links actually both links to Facebook which are links that I've visited before.
Which is why they're purple Chrome by default will make all visited thinks purple.
So let's put a link that I definitely haven't been to before and it just going to make something up
to start and I'll show you refresh the page.
It's now blue.
Because I haven't been there.
So let's leave it that way for now I'm not going to click it.
And we want the visited ones to be purple rather than.
I'm sorry we want the visited once to be grey rather than purple.
So we select a tags the pseudo selectors called visited and then we're going to make it gray save.
And if we refresh.
Keep your eye on this one here.
I'll make the font a little bigger.
It's currently purple because I've been there before I refresh.
Now it's great.
OK so hope you enjoyed that exercise.
There's a lot to unpack there.
A lot of different selectors.
And one thing I'll add is that for every solution that I have or almost every single one there are at
least one or two more ways of achieving the exact same outcome.
So if you had something that differed from me but it still worked that's great.
Feel free to add in the comments.
Share it with other people.
It's totally valid.
This is just the way that I would have done it.
One other thing.
Obviously the site is not particularly attractive.
This is not a real site.
We will be working on a real project very very soon in the next exercise video.
We're actually going to make a little blog site that is a little bit better designed.
It looks much nicer than this.
This is more just a practice exercise.