Attribute Selectors

As we've learned in previous courses, 0:00 HTML elements can accept various types of attributes. 0:02 For example, an id attribute, a class attribute, or an href and title attribute. 0:05 So what's great is that CSS gives us the flexibility of being able to 0:10 target an element by any of its attributes and values. 0:14 These are particularly useful for styling form elements. 0:18 So let's take a look at common examples of basic attribute selectors. 0:21 So when we launch our first workspace, 0:25 we have all the files we need to get started over here in the left sidebar. 0:28 So in our project files, 0:32 we have an index.html file containing the mark up for two forms. 0:33 Each form consists of simple text fields and Submit buttons. 0:40 Then over here in the CSS directory, 0:45 we have a style sheet containing all the base styles for our page. 0:47 Nothing really new here. 0:52 So we don't need to worry about this file moving forward. 0:54 Now the style sheet we're gonna use is the selectors.css file. 0:57 And when we click the Preview icon over here in the top right corner of the page, 1:02 that brings up the work space preview in the browser. 1:07 So here we're able to see what the forms look like. 1:10 The top form is a simple contact form. 1:13 And we can assume the second form to be a Login form. 1:16 So back in our work space, when we take a look at our index.html file, 1:20 notice how most of the elements have attributes in their opening tags. 1:25 For instances, the type attribute, the for 1:29 attribute, even the placeholder attribute and so forth. 1:33 With attribute selectors, 1:38 we can also target these elements based on any of these attributes or their values. 1:39 So when we define an attribute selector with CSS instead of matching the element 1:46 type the class or ID name, the selector matches the attribute itself. 1:51 And, if we wanna be more specific, we can also match the attributes value. 1:58 So for example, the most basic attribute selector will target an element attribute, 2:03 no matter its value. 2:09 So let's say we wanna target every element on the page, with a class attribute. 2:11 So we'll go back to the selector.css file. 2:17 And we're going to create our first attribute selector by typing a set of 2:21 square brackets, then writing class inside of them. 2:25 Then inside the curly braces, let's add a color property and set the value to red. 2:32 All right, so once we save our workspace and bring up the browser and 2:38 refresh, notice how only those elements with a class attribute have the red 2:43 text color style applied, even if their class attribute values are different. 2:48 So currently, the two form elements are the only ones with class attributes. 2:53 Now, if we go back to our selector and add a specific class value for 3:03 example lets say, class equals, then a set of quotes and 3:08 inside the set of quotes, we're going to type form dash contact. 3:12 And let's go ahead and replace the color declaration with a padding property, and 3:17 let's set the value to 20 pixels and 24 pixels. 3:21 And let's add a background property, 3:27 and we'll set it to a hex color value of pound #f4f7f8. 3:30 When we save our workspace, then refresh the browser, 3:39 notice how it now targets the first form with the class form contact. 3:43 As you can see here in the first form elements class attribute, the valley for 3:50 it is form dash contact. 3:55 And we may also see an attribute selector that's qualified with an element type. 3:58 So if we add the form type selector to this 4:03 attribute selector right before the opening square bracket here. 4:07 What this means is that it's specifically targeting a form element 4:11 with the class form contact. 4:16 And as we can see, it works the same way. 4:19 It's just a little more specific. 4:21 And we can do the same thing with id attributes. 4:24 So to target the div that has an id attribute with the value container, 4:28 we'll go back to our selectors.css file, and let's go ahead and 4:34 target the development then write a set of square brackets. 4:40 Then we're going to type id equals and the value will be container. 4:45 And inside the curly braces, let's go ahead and 4:53 add a max with property, and set the value to 500 pixels. 4:55 And right below that, let's add a margin property, and we'll set the value to auto. 5:00 So now, when we save our selectors.css file and refresh the page. 5:07 We can see that it targets the main container div on the page. 5:12 So now if we ever see selectors written this way in a style sheet, 5:18 we know exactly what they mean. 5:23 Well, now you may be asking, why target elements with 5:26 attribute selectors instead of the classes or ids we learned about earlier. 5:29 Well, most of the time there's no real advantage to using these 5:34 attribute selectors when it comes to targeting ids and class attributes. 5:38 It's usually best to use a class or id selector, in this case. 5:42 So, let's go ahead and do that. 5:46 I'm gonna replace the first attribute selector 5:48 with the form contact class selector. 5:51 Then right below, 5:55 we'll replace the next attribute selector with the id selector container. 5:57 So as we can see, these are a little more readable for us. 6:04 Now, attribute selectors can also be a bit slower to interpret then a class or id. 6:07 Even for the browser. 6:12 In some cases, the browser has to do a little extra work to interpret and 6:14 parse complex attribute selectors. 6:18 But, as I mentioned earlier, attribute selectors come in 6:22 handy when styling form elements, for instance, the type attribute. 6:25 An input element is what determines the function of an input element. 6:31 So, say we have a lot of input elements on the page, which we kind of do here, and 6:36 we only want to target input elements with a type attribute of text. 6:41 So, we'll go back to our style sheet, and let's target input elements 6:48 that have a type attribute with the value text. 6:54 Then we're going to add a background property. 7:02 And we're going to set the background color to a hex value of pound #fdfee6. 7:06 So now when we save our style sheet and 7:15 refresh the browser, notice how only those two input fields with 7:17 a type attribute value of text take on the light yellow background color. 7:22 But in our case, we'd like to give form fields with 7:28 a placeholder attribute that light yellow background instead. 7:31 So, let's go back to our selector and 7:34 change the attribute in our selector to placeholder. 7:38 So, we're gonna replace type equals text with the placeholder attribute. 7:42 And now when we save our style sheet, and 7:50 take a look at it again, we can see how the only field with 7:53 that light yellow background is the email field with that placeholder attribute. 7:56 [BLANK_AUDIO] 8:01 Let's say that later, we realize that we don't exactly need to 8:05 target every field with a placeholder attribute. 8:08 Just the ones that accept an email address. 8:11 Well, now we can go back, and once again define the type attribute in our selector. 8:14 So this time, we'll replace placeholder with the type attribute. 8:21 And this time, we're gonna target the value email. 8:25 So when we save and refresh the page, we can see how it targets the same form 8:31 field because if we go back to our index file and take a look at the input element, 8:36 it does indeed have a type attribute with the valid email 8:40