Attribute Selectors

5:51

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


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

  • 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] [membership.thinkvitamin.com]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.