{"id":14275,"date":"2011-09-06T20:33:18","date_gmt":"2011-09-07T03:33:18","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14275"},"modified":"2021-10-15T07:53:40","modified_gmt":"2021-10-15T14:53:40","slug":"target","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/t\/target\/","title":{"rendered":":target"},"content":{"rendered":"\n
The And this existed in the HTML:<\/p>\n\n\n\n This selector would match:<\/p>\n\n\n\n And that With that generic of a selector (matching anything that happens to be the target), if the URL changed to end in You could limit it by being specific about which elements you want to target, like selecting the One possibility is when you want style with “states.” When the page has a certain hash, it’s in that state. It’s not quite as versatile as manipulating class names (since there can only be one and it can only be related to one element) but it’s similar. Anything you could do changing a class to change state you could do when the element is in I’d use these rules-of-thumb for when The most common way is by a user clicking a link which includes a hash. Could be an internal (same-page) link or a fully qualified URL that happens to end with a hash and value. Examples:<\/p>\n\n\n\n Regardless if it’s a same-page link or not, the browser behavior is the scroll the page until that element is at the top of the page<\/strong>. Or, as far as it can if it can’t scroll that far. This is rather important to know, because it means exploiting this “stated” behavior is a bit tricky\/limited.<\/p>\n\n\n\n For instance, I once tried a variety of techniques<\/a> to replicate functional CSS tabs, but ultimately decided using the checkbox hack<\/a> was a better idea<\/a> because it avoids the page-jumping issues. Ian Hansson at CSS Science has some examples of tabs<\/a> as well. His third example uses :target<\/code> pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. For example, if the current URL is:<\/p>\n\n\n\n
https:\/\/css-tricks.com\/#voters<\/code><\/pre>\n\n\n\n
<section id=\"voters\">Content<\/section><\/code><\/pre>\n\n\n\n
:target { background: yellow; }<\/code><\/pre>\n\n\n\n
section<\/code> element would have a yellow background.<\/p>\n\n\n\n
#faq<\/code> and there was another element with an ID of
faq<\/code>, that selector would match again and the
#faq<\/code> element would have a yellow background.<\/p>\n\n\n\n
:target<\/code> by ID:<\/p>\n\n\n\n
#voters:target {\n \/* Style it up *\/\n}<\/code><\/pre>\n\n\n
When would you use this?<\/h3>\n\n\n
:target<\/code>. For instance: change colors, change position, change images, hide\/show things, whatever.<\/p>\n\n\n\n
:target<\/code> is a good choice:<\/p>\n\n\n\n
How do you get hashes in URLs?<\/h3>\n\n\n
<a href=\"#voters\">Go To There<\/a>\n\n<a href=\"http:\/\/example.com\/#specific-part\">Go To There<\/a><\/code><\/pre>\n\n\n
Jumping behavior<\/h3>\n\n\n
:target<\/code>, and absolutely positioned elements hidden above the top of the page to prevent page jumping behavior. It’s clever, but an overall perfect solution, because that would mean the page would jump upwards should the tabs be down further on a page.<\/p>\n\n\n
Browser support<\/h3>\n\n\n