CSS Tabbed Interface
Category: CSS, CSS Tips | 271 views | Add a Comment |
‘:TARGET’ PSEUDO-CLASS
A URL normally points to a page. But when the URL ends in “#something” it targets a specific element in that page. Browsers typically try to make sure that the targeted element is visible and if possible at the top of the screen.
With the ‘:target’ selector, you can add a specific style to the target element, so that it gets more attention.
But you can do more. You can hide or display elements based on whether they are the target or not. Below is an example. It shows a little menu with four items and each item is linked to some text. But at first no text is shown. Each item is a link to an element with a target ID (#item1, #item2…) and those elements are only visible when they are the target of the current URL.
Here is how it works. There are two important parts, the HTML source and the ‘display’ property. First the HTML document. It has some links and elements with corresponding IDs:
