This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

CSS :target Selector

1:52 CSS lesson by

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
Pete

What editor add-on does the magic with (#tab$.tab>h1{Tab $ content})*3? I've seen you use it in other videos and would like to add it to Atom if possible.

In reply to egghead.io
Avatar
Joseph

It's called emmet, formerly zen coding. https://github.com/emmetio/emmet-atom

In reply to Pete

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?