Name: CSS :target Selector
Uploaded: 2016-04-04T09:30:31-05:00
Description: The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

https://app.egghead.io/api/v1/lessons/css-css-target-selector/subtitles

CSS :target Selector

[00:00] The target pseudo-selector allows us to interact with fragment identifiers in our URL with CSS. So to illustrate this, I'm going to go ahead and set up a few divs that are going to have an ID of tab followed by an integer. They're also going to have a class of tab, and inside that they're going to have an H1, and its innerHTML is going to be tab integer content. So we're going to go ahead and set up three of those, save that, and we can see on the right here we've got our three tabs. 

[00:31] I'm going to go ahead and save that here in our style, a tab has a color of green. Save that. Everything's working as it should. Now we're going to say a tab that is the target, using the target pseudo-selector is a color of red. Save that, everything's going to stay the same, but up here in our address bar I'm going to add a #tab1, and you see tab1 has become red, because it is the target as identified in the our URL. If I switched tab2, tab2 becomes red, and tab3, tab3 becomes red. 

[01:11] Now to illustrate this a little bit further I'm going to create a handful of anchor tags here. It's going to have an HREF equal to # tab integer, and its innerTEXT is going to be tab integer, and again we'll create three of those to match our tabs. Now when I click on tab1, tab1 becomes red, tab2, tab2 becomes red, tab3, tab3 becomes red. Just to take this a little bit further on our class of tab, I'm going to say display none. 

[01:41] Our class of tab that is the target, I'm going to say display block, and now we go to tab1 it becomes visible, tab2 becomes visible, tab3 becomes visible. 

CSS :target Selector

Share this video with your friends