In this video, we're going to take a look at selecting using CSS selectors. So another way to select nodes from the DOM. So first, some general information about selecting nodes with CSS selectors. The two methods that you use for this are query selector and query selector all query selector will simply find the first node in the DOM and return that it won't look for any others after it finds the first one. query selector all will return an array of all the nodes that match whatever criteria we pass in. Now the criteria we pass in inside the parentheses are CSS selectors.

We enclose it within quotes, so it's a string that evaluates to a CSS selector. Now if you have done any CSS, you are probably very familiar with CSS selectors. If you have not, this may be new to you. I will show some examples CSS selectors to give you an idea. But let me first show you what CSS selector is. So in this CSS page that I have, right, here's a CSS selector.

For example, this says, the class bullets and inside of that the UL tagged Li tag, and then it applies this style to, to the resulting elements. A CSS selector can be simple as well, simply a class bullet read. Or it could be an ID. Here's an ID and then inside of that ID, an image tag. So those are CSS selectors. And you can use those using query selector all or query selector.

Query selector and query selector all are compatible with Newer browsers, but they're pretty widely supported now. So you should be able to use them unless you're really coating too much older browsers before I, for example. And then finally, query selector and query selector all are available on the document object or any element nodes, which you've selected. So you do have some flexibility about where you use them. Now let's look at some examples of how you would enter the CSS selector inside the parentheses there. So you can enter a tag name and if you enter a tag name, it is just the name of the tag without any other characters around it.

If you enter an ID, then you must preface the ID with the hash or the pound symbol. That indicates that it is an ID that you're looking for. If it is a class name, you must preface the class name with a period that indicates That's a class name you're looking for. Now you can combine these. So in this example here, this is a real example of a CSS selector. I'm looking for the span tags that have a class of bullet blue.

That's what this will retrieve. Notice there is no space between span and the dot bullet blue. This next example, I'm looking for the div tag, and then inside of the div tag, a child tag that is an h1. So it has to be a child of a div in order for it to select this right here, we are looking for an element that has an ID of content. And then somewhere in its descendency, there is an h1 tag, notice this space so it doesn't have to be a child, it could be a child of a child, the greater than symbol here indicates that it needs to be a child. So this is just a descendant that is inside of a tag that has an ID of content.

Another example, there's a space here that might be a little bit hard to see, but there is a space here. So this is a tag with the idea be five, and then a descendant of that, that has a class of bullet blue. Finally, you can also use more than one selector. So in this case, we have a comma. So we're indicating that we want to get all the Li tags and all of the span tags, and it will return them together. Now obviously, this one should be done with queers query selector all.

Alright, let's look at a few examples. So I'm going to use Use the same HTML page. Let me open up the console. And I'm going to dock that at the bottom. Now first thing we want to do, I'm going to open up the HTML page so you can see what we're after. First thing we're going to do is we're going to use query selector.

Many times, you're using query selector all because it just likes everything you want. But there may be situations where you just want the first one encounters. We're going to use query selector all and we're going to look for a span tag that also has a class of bullet blue. So we would do it this way. document dot query selector. And then inside of parentheses, and inside of quotes, we are going to do span dot.

Bulla blue without a space So when we don't have a space, it indicates that the tag must also have that class. press return display node. And there's our first span tag See, lights up as the first one there. It grabbed the first one. Now let's do the same command. But let's do it with query selector, all return display node.

And now we have an array and we have all three span tags because they all three, have the class bullet blue. Let's do another query selector. And this is a good example of when you will use a query a query selector because we are looking for a single ID the idea Is b1. Now remember when we're indicating an ID, we have to put the hash in front. Press return. And now list one does not return an array.

So I can immediately begin working on that node, I can chain, make changes to it, etc, as we've done in previous videos. going to do a clear so we can clear the console. Now, we will do a query selector all. Another example using h ones. And this time, we're going to do a query selector all of div tags that have a child that is h1. So if we look at the HTML, here's the div tag.

And yes, there is a child of h1. Notice there's another div tag. If there were an H one Beneath that, he would find that as well. In fact, let's just test that out. Let's put an h1 and then let's put an h1 inside of this oil tag. Now this one It shouldn't get because it's not a child of a div tag, it's a child of the oil tag, the ordered list tag.

Okay, I'm gonna save that jump back out. And I'm going to refresh this page. So we have those three h ones in here. My command is still here because I hadn't press return. Now I press return. Let's see what we get h ones.

And notice we picked up two h ones. This one and this one. We did not get the third because it is not a child of a div tag. All right, let me remove those H ones. Save that and refresh our page. All right, one more example, I want to do an example of where you can indicate more than one CSS selector and you do that by separating them with a comma.

So let's do var group equals document dot query selector all. And then inside the parentheses and inside of quotes, I have Li, and span. So this is going to pick up all of the Li tags, and all of the span tags and return it in an array. So let's see how that works. press return type in group. Let's see what we've got here.

So here's an Li tag, an Li tag, another Li tag. Here's a span tag, another Li tag, span tagging can see them highlighting on HTML page, a bomb as I mouse over them. So we can See that that selected both criteria, a selected the Li tag and the span tag. Now that criteria could be more involved query selector as well, it doesn't have to be a single tag or a single ID. You could do the same type of query selectors as, as we did in some previous examples. These two commands are probably used the most frequently for selecting items in the DOM so that you can manipulate them.

So very important to know these. If you aren't familiar with CSS, I would encourage you to learn CSS if you're going to be working with the DOM much at all, as a JavaScript developer is important to know HTML and CSS. So you may want to spend some time on those topics. And learning CSS selectors will lend itself to you using query selector and query selector all let's move on to the next topic.