:target - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:target

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. target

Description

The :target selector selects the current active target element.

The element being linked to is the target element, which has the form as URL with an # followed by a name.

Example

Create a tabbed menu:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
.tab div {<!-- w  ww.j a  v  a 2s .c  om-->
    display: none;
}

.tab div:target {
    display: block;
}
</style>
</head>
<body>

<div class="tab">

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  <p>Hello World!</p>
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  <h4>Great success!</h4>
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  <p>Yeah!</p>
</div>

</div>

</body>
</html>

Related Tutorials