Attribute Selectors


In this video, you'll learn about all of the new attribute selectors in CSS3.

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] []

  • 0:07

    [CSS3 Selectors - Attribute Selectors with Nick Pettit]

  • 0:13

    In addition to lots of new properties and features,

  • 0:16

    CSS3 also introduces new selectors.

  • 0:20

    In this video, we'll get started with attribute selectors.

  • 0:23

    There are only 3 new attribute selectors, but before we get to those,

  • 0:28

    I'd like to make a note about browser compatibility.

  • 0:32

    The bad news is Internet Explorer 8 and older won't support all of these CSS3 selectors.

  • 0:39

    The good news is Internet Explorer 9 will have very complete support for them.

  • 0:44

    All of the other major browsers like Firefox, Safari, Chrome, and Opera

  • 0:49

    have supported CSS3 selectors for one or two versions now.

  • 0:53

    If you do need to use some of these advanced selectors,

  • 0:56

    be sure to check out the jQuery Javascript library.

  • 0:59

    Using jQuery, you can usually use the selectors,

  • 1:03

    even if they're not supported in the client browser.

  • 1:06

    Now that we have that out of the way,

  • 1:08

    let's go ahead and move on to CSS3 attribute selectors.

  • 1:12

    So here we have a page that we did in the HTML and CSS chapters;

  • 1:17

    it's kind of like a final project for CSS.

  • 1:20

    Let's go ahead and switch over to our text editor

  • 1:23

    and we're going to put our selectors down at the bottom of our style sheet here,

  • 1:31

    and I'm just going to create a new flag that says CSS3 Selectors

  • 1:38

    and I'll make some room to work here.

  • 1:40

    I'm just going to go ahead and type out our first selector,

  • 1:44

    and then i'll go ahead and explain it.

  • 1:46

    So I'm just going to go type image and select the source,

  • 1:52

    and we're looking for the string "images"

  • 1:56

    and we'll change the border to 5px solid orange

  • 2:05

    so that we'll clearly see anything that is selected by this.

  • 2:10

    So when I refresh the page, you can see all of our images

  • 2:13

    are now outlined in orange.

  • 2:16

    Let's go ahead and switch back to the code so that we can see why this is.

  • 2:22

    Here, we have what looks like a pretty normal attribute selector,

  • 2:26

    but we have this little caret^ modifier

  • 2:29

    just before the = sign.

  • 2:31

    This selector is looking for any image tags

  • 2:35

    that have the source attribute that begins with the exact string "images."

  • 2:41

    Because all of our images have relative paths and we only have one folder with images in it

  • 2:47

    called "images," they all have paths that start with the string images.

  • 2:52

    Pretty simple, and useful in lots of situations.

  • 2:56

    Let's go ahead and move on to our next selector.

  • 2:59

    So I'm just going to change this a little bit, and i'll change this to a different color,

  • 3:06

    so that we can see what we're actually selecting

  • 3:10

    and we do need to change our string here.

  • 3:13

    And I'll save that out and when I refresh the page, you can see that once again,

  • 3:19

    all of our images have been selected, but they now have a green border.

  • 3:22

    So let's go ahead and switch back to the code

  • 3:25

    and see why these are being selected.

  • 3:28

    I've changed our caret modifier to a $, and I've changed our string to .jpeg.

  • 3:36

    This selector is selecting all of the image tags

  • 3:40

    with source attributes that end with the exact string .jpeg.

  • 3:46

    You can imagine if we had different file types on our page,

  • 3:50

    only the jpegs would be outlined whereas the png.'s or other file types would not be.

  • 3:56

    Similar to the previous selector we looked at,

  • 3:59

    there are lots of practical use cases for this.

  • 4:02

    You don't necessarily have to just use this on images or source attributes.

  • 4:06

    So let's go ahead and look at our last one.

  • 4:10

    I'll change this to "a" and we're actually going to change our attribute here to href.

  • 4:18

    I'm going to put a * there, and we'll change our string to a hash symbol.

  • 4:25

    And let's go ahead and just change this back to orange, so when I switch back and refresh,

  • 4:32

    You can see that some of our links are now outlined in this orange border.

  • 4:38

    So let's see why this is.

  • 4:40

    With this selector, we're selecting all of our anchor tags,

  • 4:44

    or links, that have href attributes that contain the exact substring hash.

  • 4:53

    We're searching for the # symbol in this case, and it's highlighting all of the links

  • 4:57

    that contain a # in their href path.

  • 5:02

    So let's go ahead and switch back to the browser here--

  • 5:05

    you can see that we have 3 links highlighted here,

  • 5:09

    and in the markup, they actually only have a #

  • 5:12

    because they don't link to anything.

  • 5:15

    If we had some other links, though, that may be linked to other parts of this same page,

  • 5:21

    or executed some kind of Javascript,

  • 5:23

    they might also contain a hash in their path.

  • 5:26

    You don't have to search for a hash symbol, of course.

  • 5:30

    You might, for example, use the selector to highlight

  • 5:33

    any images that contain a certain word somewhere in their file name.

  • 5:38

    That's it for all the new CSS3 attribute selectors,

  • 5:42

    but in the next video, we'll start learning about the new pseudo-selectors.

  • 5:46

    [?mellow guitar music?]

  • 5:48

    [Think Vitamin Membership - Est. 2010] []

Show full transcript