Often when working with HTML,

you'll use classes to give the elements a particular look and feel with CSS.

For example, remember earlier when we typed an invalid

email on the Treehouse home page and it turned red?

Well errors like these are displayed to the user by placing a class like error or

warning on the element in question.

To select elements with the same class we can use document.getelementsbyclassname.

So over an index.html, let's add a few things that aren't purple to the list and

give them a class of error not purple, then we'll see how to select them.

So first right below grapes,

I'll add a list item of oranges with the class,

error-not-purple.

I'll go ahead and copy this list item and

paste two more let's say right above plums.

And I'll make the top one fire trucks and the bottom one snow.

Let's give index.html a save and over in app.js we can just

copy the JavaScript block we wrote in the previous video.

And paste a new one right below it and here we're gonna replace a few things.

So let's start by changing the myList constant here.

To errorNotPurple to reflect what we'll store here.

And then will change the word Tag to Class.

Now the Class we want is error-not-purple.

So we'll pass that into this method.

And in our for loop we'll want to make sure we're comparing

errorNotPurple's length in the condition.

So I'll replace all instances of my list with errorNotPurple.

So now, what do we want to do with these non-purple items?

Well normally we might want to hide them or remove them,

perhaps change them to fit our criteria, but for now let's just turn them red.

So normally our CSS might change the look for us but

changing them to red with JavaScript will show that our selection is working.

So to review what's going on here, first the entire list will be turned purple.

Then, just the list items with the errorNotPurple class will be turned red.

So they will change color twice, but

it will probably happen too quickly to be able to see it.

So go ahead and save my file and then go back to the browser and refresh.

And you can see that the non-purple items are now red.

So great, our selection worked.

Up next I'll show you a much more versatile way to select elements.

See you there.