Welcome back, my friends, to another lecture today where we are going to do is we are going to continue
working with where we stop.
Actually, we are today.
We are going to do we are going to grab the elements by idea or we can use the second way using the
square we select.
So the question we selected is a much newer and much powerful faster, if you want to say.
But we're going to use the get the elements by now.
These are a single element selector.
We have a multiple element selector where we can select multiple elements.
And when I say single element selector, we have to show you.
So we have here, for example, I don't have anything with ID actually, so I'll just search it.
ID nope.
I don't have.
I did page content but I'm not happy with that.
Now I'm going to create here inside a car each one and I'm going to say, OK, a single element.
Selectors, very cute in here.
I'm going to give you the class let's put it project title.
And I'd just title right and refresh, see what's happening here in there now we if we have what's called
single element selectors because we have the same idea or same class name somewhere here, look at this,
for example, we do have this I have the same to do list.
Right.
Same classman.
So it's going to grab only the first one or it's going to grab the first.
Whereas the first occurrence of this idea or class is going to grab that element.
It's not going to go on.
The second one is not going to go in the third one and so forth.
So for now, I hope you understand.
That's why it's called single element selectors.
Now, what we can do, we can use get out of them and bidi in that it's been there for a very long time.
So what we are going to do, just going to create a couple of variables here.
Now one more thing.
I'm just going to comment this one control and for Slash, I'm going to copy it.
Actually, I'm going to put it here and I'm going to say at one and I'm going to create additional F
actually I'm going to copy of this one and rename it moves.
I don't want to delete it.
Come on.
So I'm going to rename it to one.
That's it.
Now inside, I'm just going to delete everything, so I hope it's going to work.
Let's test it out.
Alert working.
Remember, you need to link it in your index, that HTML.
Here it is, it's working now.
Good.
Don't need this one.
I don't need this one.
Actually, maybe I did take that one.
OK, we get golden now.
Know, what we need to do is actually to get the elements.
So I know that we have the element with ID right here.
And I'm going to refresh actually actually I'm going to use this one now.
OK, now what else we need to do?
I'm going to create here a couple of variables and we can use those variables and I'm going to say title
the variable title is the first one that we're going to use.
So what we are going to do is we are going to grab the the title.
So the title equal document, not get Elamine by the second one.
There is a class name as well.
We're going to, but there is that element by deep.
And now what we need to do is just to specify the name of the title.
So if I do kinds of locks, let's lock this one title and let's see what's happening.
Right.
That's what's happening.
I'm going to refresh actually nothing's going to happen and nothing here.
I'm just going to do the inspect here to cancel.
It really is the project I is they're just going to inspect here.
What's happening to see how is working is OK.
Yeah.
Here it is the title.
Is there no one else we can do here.
So we select actually the each one that where the title is.
But that is not like what we want to achieve for example.
So what we want to achieve is pretty much grab the project title, grab the title, let's grab the grab
the idea and the project.
And so what I'm going to say here, I'm just going to create an additional variable here, idee.
And what we can do is I can just copy this bad guy here and dot I.
D Now if I can block this one and say, OK, project is.
Project idea is plus not like that, and I'm going to do the hash one and concatenate now actually.
This should be here, Heidi, right now, let's refresh and see what's happening.
The project is titled Very Good, and that's what we are getting.
Where is this one, actually?
Yeah, for some reason, OK, here is no doesn't matter.
I was thinking where the title of is the title so I couldn't see it, but because we have a console
here, an inspector, and that's why it's shifting things up a little bit.
Now, we can also get the class name if we want to.
So how we can do this.
So I'm going to create additional variable here.
See a name that stands for class name.
And what we can do is actually we can grab it here, but instead of grabbing it by grabbing it class
classmate.
Now I'm just going to copy the same here and I'm going to print it out.
Sini and the project class is and I'm going to put it here.
See, that's it.
Pretty much in the project, actually.
Class name is different than title is project title.
Let's see if it's going to work.
Yeah.
The Project class is a project title.
Very good.
So now you know how to grab Yagiz in, grab the class name.
Now look what we are doing here.
We are just repeating ourselves with the document to get Elliman by the title.
Right.
So we can just make this one a little bit shorter.
So how we can do this, because we already have this title here.
It's Stort.
I'm just going to show it to you how we can do it like this.
Guess you're just going to say class name, and this is the number one way to number two, because it's
already been Stort, it's already been stolen.
What happened?
It's already been stored there in the title.
So what we can do is C name equals title, dot class name.
And instead of bringing here this, we can just print it out the.
Yeah, actually we need to remain the same.
That one.
Right.
It is a project that it's giving me the same result.
So that is pretty much it.
OK, what else we need to what's happening with this one?
I'm just going to close the Firefox now.
We're getting the same result and we just our code is a little bit shorter.
We can do the same thing.
We can achieve the same thing with the idea.
It seemed like this idea equals Tyto that idea and he should give me the same output here.
She didn't change it.
Very good.
Now you know how to grab it and you don't repeat yourself, right?
So don't repeat yourself dry.
That's how they call it dry.
Don't repeat yourself.
Don't repeat the code a couple of times and that will be better.
Now, we can just we don't want to use just to grab the kids in class.
Names we want to achieve here is also sometimes we can add styles by by getting their ideas or by getting
the element by.
Right now, for example, I'm going to create additional variable here called text online.
You probably guessed it.
What it's going to happen next.
The line, it will be equal to Tyto, so I'm not going to grab here document douget get element by idea.
Actually I'm just going to put it first and I'm going to comment.
And so here what we can say style.
We can apply style by the way guys.
So styles are fixed, aligned and probably and didn't put this one here.
So you can say a line here because it's the same with this one line in the line.
So text the line and I'm going to put it equal to that.
Should be equal to, for example, center.
I just want this here this to be positioned in the center.
So let's hope it's going to work.
It is working now.
If you go to the inspector and if you click, where is it in a container, I think it's inside the container.
No, where is it?
Here is the title.
Now I see that the style is at it with the center right.
So if I unstick this one it will return to the previous value.
Right.
Very good.
Now we can add styles, but this is not the way we should do.
We can add those styles with CSX.
Right.
We don't do this properly, but for some things, yes, we can also we can change of color if we want.
So I'm going to say, OK, style color.
I just want to keep things tidy.
That's why I just put it here.
An additional one now.
Just going to show you that I don't want to use this one.
I'm just going to say title because I have this document that gets element body.
I want to repeat myself.
Right.
And I'm going to say style color and we can apply a color if we want.
Now you can apply hexadecimal values like I don't know what's for rent, but yeah, you can apply hexadecimal.
But I'm going to just put it here straight right now.
I'm just going to refresh.
And here it is.
The read in this is they're very good.
How cool is this?
If I take this one, it will go back to the boring old black color.
Now we know how to apply the color.
So what we actually need now is we can also put up adding, I'm just going to show you a couple of things.
Stop adding in here.
It will be style padding instead of color.
And we can just put here REM's pixels, percentage, whatever you want to put it here.
Right.
Then pixels is going to be good.
And let's be clear, this one here on top.
Mm hmm.
Let's see Banning's apply.
Here it is, you can see how it's shifting.
Very good.
Now you know how to apply padding, what else we can do.
We can do a lot of things that we can do with scissors.
That's not the goal.
But, yeah, now we can do a background if we want style background in the background.
Let's put it like
three, three, three and see what's happening in style back.
Just got to put this like this style back every single word.
Here is the background here style in here.
It is our job.
You can even put that what you do right style is bad, like a dark gray.
Now we can also what we mostly times use this one.
We can just we just can't make it unless we can do things to disappear.
So we can just put this one, the H1 tag to display none and we can just return it.
That is sometimes the goal of what we can do with the JavaScript.
We can just hide things, put them visible again on mouse, click on some events.
Right.
But I'm going to show it to you so how we can do it now.
We can just say style and display.
So we need to do the display.
Right.
And this actually we're going to using our diski.
That's good.
So I'm going to say style display to none and I'm going to say style visibility here.
This is a variable only you can just and I'm going to copy it here.
Oh actually no.
Should be.
I'm just going to go back here style back.
So she put it in the wrong place.
So style is ability and let's style visibility copy and save it.
Now we don't have it because here if you do watch it display to none.
So if I don't think that one is there right now, I can.
All right.
This one.
But put it style block nice so I can override this one and just put it back where it was.
How cool is this, how powerful is this.
So we can just use a lot of tricks here.
Now we can also add text so we can add content using text content or in our text.
Let's put this one at text.
I'm going to say in our inner HDMI and the other one is text content.
So there is a two ways the interaction with you, you will see why we can use the both of them.
Know what I'm going to say here, add content and see title the text content and we can apply a new.
So what.
This will do whatever we put here.
So it will find title.
Don't be confusing to find this one title with the document by the so it will find where is this.
And inside here we do have a single element selection.
Can you see this.
There is now I just want to change that one to say OK, so what else we can write here.
New title is a simple and add content.
Even if I don't put it here, it will work as a new variable.
It is.
We have a new title right in.
There you go.
Now you can achieve the same same thing.
Let's put a space here.
You can achieve the same, the same thing with enraged you.
Now new title one.
Let's put it something else too.
We can see that it's working.
So that is how we can do now.
We can also add a code with this inner HTML.
That's why this inner HTML, we can add some new tax.
It's not just for putting a text here.
This is also in our tax sorry, not in our HMO.
So there is a one way that we know sometimes we don't just put the text here, we just want to put here
some HTML.
So how we can do that.
There is a one very interesting.
It's called AB HTML that's it's called inner HTML.
That's it.
Now I'm going to add content.
I'm going to put it here.
So what we want to do is we just want to create a div class inside here.
So I'm just going to open the up this one.
So I'm just going to create a diff class and.
Inside here, I just want to create a deep class with new title in Spanish inside, right.
Let's put it like that.
Have an inner HTML.
Very you and what I'm can do, I'm going to say, OK, I'm going to define your class and I can define
even the class name.
So make sure to use double quotations here because it's not going to work with a single one and a new
title.
And also, you can put a spanner here.
If you want to.
So let's hope it's going to work.
Now I'm going to refresh.
Here it is.
The title is Dear, but let's see what's happening.
So if I go inspected, here it is.
There is this new title with the title.
It's very powerful how we can add even what we can do.
We can just create here a class, another class.
Actually, I'm going to put a style and I'm going to say font color.
I'm going to say color or let's say font size 50 pixels.
So that what we do, it will do.
It will increase this font size to 50 pixels.
Here it is.
There's a 50 pixels.
There is additional new title.
This is how you can add in our HTML tags, not just simple text you can add.
That's right.
And that is very powerful.
So you can use this one even in your years in your projects.
So this is how far I want to go with the document, get anything by it.
Now, the second way is to use the more modern it's called Querrey Selector.
So what we can do here is we can say just I'm going to add new variable called query, query title.
We can just achieve the same thing right now.
Query title that will be equal to.
So you guess what?
So we need we don't use documenters.
Get out of my body but we use documental get Elliman.
No, not get element that query selector.
Right.
So the query selector if we can just achieve this by two ways.
Now if we want to query selector to take to get by tigi, we use hash in the title right now.
If we cause a log return is probably an object.
Mm hmm.
So.
Yeah, it is it written this one titled Project title, text the line, we turn everything.
So if I uncommented that one, I mean, if I take that one, there is nothing there.
Right.
So I'm just going to put it like that.
Now, one other way that you can do query selecter, you can find the same achieve things, you can
achieve the same things if you use the class.
So how we can get the class now we know that we the query select, we use hash to sorry to get the title,
but we can achieve the same thing with the class.
But we use DOT in the name of the class project.
I think title was project title and it should give us the same result.
Here it is, the same result.
Now what we have done with the get element by idea, we can also do a little bit of styling here.
Now we I do have these are unordered plays with a lot of elai elements inside.
Right.
So what we can do is actually we can access those elements.
But because he's a single selector to access the first one, remember, I have the allies, they have
the same class name.
So what we can do is say, OK, let's say query title.
Maybe Querétaro is not appropriate, but I'm going to use it like this.
So the name the class name of these bad boys here the is to do list element.
Right.
So I'm just going to let me stay there.
So to do these elements.
So I'm going to do OK.
I just want to style first the background.
I just got a different background and I'm going to use hexadecimal three five.
Look, what will happen now is it's going to match the first one, although I do have C when I select
this one, it's like they do have this one everywhere in that line.
But because a single query selector, it will select the first one.
Now you can select the first one.
The second one.
The third one.
The last one using using pseudo classes.
So I'm going to show you how now.
We can just so we can just use here, we can just pointed out, we can say, OK, I just want to select
Last Ally and that is how we can do the last child.
So if you took my other courses, this will be very easy.
Now, I'm just going to put here some different color I don't want I do have that one color, so let's
put a green.
So I'm hoping this ally very I think even u l l I will work very good because lies inside this u l right.
So we can use that one as well also.
But I'm just going to remove it because it doesn't look very natural to me.
So we can also use a A.H. child here in the studio classes.
So any child number two, we need to specify which child you need to see.
OK, this one, it should be orange, orange, red.
And actually which one is the second child?
You will see this one and we can access the third one.
This will be blue.
How cool is this that is working also what we also what we can do, we can just change the text if we
want to.
Some of them, for example, I don't want to last child to have this extra course lectures.
So how we can do this?
I'm just going to copy this one.
No, actually, I'm going to copy this one with Green and I'm going to use the same text content here
instead of I'm going to remove this, I'm going to say text content.
I'm going to put a new content here.
So this is added with query selector
and I'm going to refresh now and I hope it's going to work.
This is added with a query selector.
How cool is this?
Now you know how to get Elliman by their idea or using a query selector.
This is a single element.
That's why we can just change one here.
It's not going to select everything here.
And by the way, why it's not OK.
Yeah, maybe because when we added when we had it, we remove that thing from how to call it.
Yeah.
We remove this class.
That's why.
So thank you for watching.
I hope you understand what we're trying to do right here.
But what we can do, we get Elliman by the essentially we can do the same thing with queries like that,
of course, led to the newer, newer version and newer way of how to do it.
You don't have to define all of these variables if you want, but it's good to have it here.
Now, this is for today's class.
So how we can select the items and using elements selector.
And in this case, in this lecture, we just check the single element selector or.
Yeah, we can do that.
So pretty much done.
We can also select the classes that we will live with the next time.
So thank you very much and I hope to see you in the next lecture.