This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    CSS :target Selector

    Joe MaddaloneJoe Maddalone

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss