Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Additional Pseudo-Classes

Posted by Reggie Sibley
Reggie Sibley
6,018 Points

Psuedo Classes

Ok, with this lesson on psuedo classes im just not quite understanding how they are targetting the div's within the CSS with just the class :TARGET. To me this makes no sence, i understand that when u use the :EMPTY psuedo class that it only looks and targets empty div's but the :TARGET one makes no sence, can someone please explain?

[IMG]http://i60.tinypic.com/2ev5bpg.png[/IMG]

1 Answer

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Check out the simple code pen at the bottom I made that should help show you what's going on.

Simply, the :target rule only gets applied to an element when it becomes a target, otherwise it just lays dormant.

That's it!

http://codepen.io/anon/pen/MYeKmP

Reggie Sibley
Reggie Sibley
6,018 Points

Ok what you posted i understood but, my question is how does the :target psuedo class know that it needs to target that specific box id and change the background color, i mean wouldnt you have to be more specific? Like for example something like: ( #box:target {background:red;} ) because im just not quite understanding how to :target works without being told what exactly its going to apply that attribute to.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Just :target will get applied whenever any element becomes a target. This :target style could be reused on a div, h1, p, input, whatever. It's not element specific at this point.

When you do something like #box:target you're now saying this rule only applies to divs, with the id of box, that become a target. In many cases you may want this. It could also be div:target which would be less specific, which would be any div that becomes a target. This would exclude p, h1, inputs, etc.

Modern browsers are smart enough to understand when an element becomes a target, and apply this CSS class. In a sense, this allows us to change visual states of elements with Javascript.

Now check back on my codepen above. I added an H1 tag, that will become a target. When you make the div target, you'll see it receives the target background, but not the border change from the h1:target.

Now click on the H1 link. It receives the same :target background, and it receives the h1:target as well. That's because of the specificity of the CSS selector.

Chris Coyier says

:target - The target pseudo class is used in conjunction with IDs, and match when the hash tag in the current URL matches that ID. So if you are at URL www.yoursite.com/#home then the selector #home:target will match. That can be extremely powerful. For example, you can create a tabbed area where the tabs link to hash tags and then the panels "activate" by matching :target selectors and (for example) using z-index to move to the top.

Read more here: http://css-tricks.com/pseudo-class-selectors/