As we've learned in previous courses,

HTML elements can accept various types of attributes.

For example, an id attribute, a class attribute, or an href and title attribute.

So what's great is that CSS gives us the flexibility of being able to

target an element by any of its attributes and values.

These are particularly useful for styling form elements.

So let's take a look at common examples of basic attribute selectors.

So when we launch our first workspace,

we have all the files we need to get started over here in the left sidebar.

So in our project files,

we have an index.html file containing the mark up for two forms.

Each form consists of simple text fields and Submit buttons.

Then over here in the CSS directory,

we have a style sheet containing all the base styles for our page.

Nothing really new here.

So we don't need to worry about this file moving forward.

Now the style sheet we're gonna use is the selectors.css file.

And when we click the Preview icon over here in the top right corner of the page,

that brings up the work space preview in the browser.

So here we're able to see what the forms look like.

The top form is a simple contact form.

And we can assume the second form to be a Login form.

So back in our work space, when we take a look at our index.html file,

notice how most of the elements have attributes in their opening tags.

For instances, the type attribute, the for

attribute, even the placeholder attribute and so forth.

With attribute selectors,

we can also target these elements based on any of these attributes or their values.

So when we define an attribute selector with CSS instead of matching the element

type the class or ID name, the selector matches the attribute itself.

And, if we wanna be more specific, we can also match the attributes value.

So for example, the most basic attribute selector will target an element attribute,

no matter its value.

So let's say we wanna target every element on the page, with a class attribute.

So we'll go back to the selector.css file.

And we're going to create our first attribute selector by typing a set of

square brackets, then writing class inside of them.

Then inside the curly braces, let's add a color property and set the value to red.

All right, so once we save our workspace and bring up the browser and

refresh, notice how only those elements with a class attribute have the red

text color style applied, even if their class attribute values are different.

So currently, the two form elements are the only ones with class attributes.

Now, if we go back to our selector and add a specific class value for

example lets say, class equals, then a set of quotes and

inside the set of quotes, we're going to type form dash contact.

And let's go ahead and replace the color declaration with a padding property, and

let's set the value to 20 pixels and 24 pixels.

And let's add a background property,

and we'll set it to a hex color value of pound #f4f7f8.

When we save our workspace, then refresh the browser,

notice how it now targets the first form with the class form contact.

As you can see here in the first form elements class attribute, the valley for

it is form dash contact.

And we may also see an attribute selector that's qualified with an element type.

So if we add the form type selector to this

attribute selector right before the opening square bracket here.

What this means is that it's specifically targeting a form element

with the class form contact.

And as we can see, it works the same way.

It's just a little more specific.

And we can do the same thing with id attributes.

So to target the div that has an id attribute with the value container,

we'll go back to our selectors.css file, and let's go ahead and

target the development then write a set of square brackets.

Then we're going to type id equals and the value will be container.

And inside the curly braces, let's go ahead and

add a max with property, and set the value to 500 pixels.

And right below that, let's add a margin property, and we'll set the value to auto.

So now, when we save our selectors.css file and refresh the page.

We can see that it targets the main container div on the page.

So now if we ever see selectors written this way in a style sheet,

we know exactly what they mean.

Well, now you may be asking, why target elements with

attribute selectors instead of the classes or ids we learned about earlier.

Well, most of the time there's no real advantage to using these

attribute selectors when it comes to targeting ids and class attributes.

It's usually best to use a class or id selector, in this case.

So, let's go ahead and do that.

I'm gonna replace the first attribute selector

with the form contact class selector.

Then right below,

we'll replace the next attribute selector with the id selector container.

So as we can see, these are a little more readable for us.

Now, attribute selectors can also be a bit slower to interpret then a class or id.

Even for the browser.

In some cases, the browser has to do a little extra work to interpret and

parse complex attribute selectors.

But, as I mentioned earlier, attribute selectors come in

handy when styling form elements, for instance, the type attribute.

An input element is what determines the function of an input element.

So, say we have a lot of input elements on the page, which we kind of do here, and

we only want to target input elements with a type attribute of text.

So, we'll go back to our style sheet, and let's target input elements

that have a type attribute with the value text.

Then we're going to add a background property.

And we're going to set the background color to a hex value of pound #fdfee6.

So now when we save our style sheet and

refresh the browser, notice how only those two input fields with

a type attribute value of text take on the light yellow background color.

But in our case, we'd like to give form fields with

a placeholder attribute that light yellow background instead.

So, let's go back to our selector and

change the attribute in our selector to placeholder.

So, we're gonna replace type equals text with the placeholder attribute.

And now when we save our style sheet, and

take a look at it again, we can see how the only field with

that light yellow background is the email field with that placeholder attribute.

[BLANK_AUDIO]

Let's say that later, we realize that we don't exactly need to

target every field with a placeholder attribute.

Just the ones that accept an email address.

Well, now we can go back, and once again define the type attribute in our selector.

So this time, we'll replace placeholder with the type attribute.

And this time, we're gonna target the value email.

So when we save and refresh the page, we can see how it targets the same form

field because if we go back to our index file and take a look at the input element,

it does indeed have a type attribute with the valid email