[Edit]

CSS - :target peseudo-class example

1 contributors

2 contributions

0 discussions

12 points

Created by:

Root-ssh

178260

:target pseudo-class is used to describe styles for element which has id attribute and url hash has been set to id value.

1. Simple example

Edit

Note: to see effect copy the code to server and type in browser addreses with hashes:

#bokmark-1 e.g. http://localhost#bookmark-1
#bokmark-2 e.g. http://localhost/#bookmark-2
#bokmark-3 e.g. http://localhost/index.htm#bookmark-3

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    :target {
        background: yellow;
    }
    
  </style>
</head>
<body>
  <div id="bookmark-1">Article 1</div>
  <div id="bookmark-2">Article 2</div>
  <div id="bookmark-3">Article 3</div>
  <script>
    
    // this line is only to show how it works inside embedded online example
    location.href = '#bookmark-2';
    
  </script>
</body>
</html>

Auto running

2. Target navigation link with menu example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    div {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid gray;
    }
    
    div:target {
        background: yellow;
    }
    
  </style>
</head>
<body>
  <h3>Menu:</h3>
  <ol>
    <li><a href="#bookmark-1">Article 1</a></li>
    <li><a href="#bookmark-2">Article 2</a></li>
    <li><a href="#bookmark-3">Article 3</a></li>
  </ol>
  <h3>Articles:</h3>
  <div id="bookmark-1">Article 1</div>
  <div id="bookmark-2">Article 2</div>
  <div id="bookmark-3">Article 3</div>
</body>
</html>

Auto running

:target pseudo-class with navigation menu (link) example

3. Article header styles example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    .article {
        margin-top: 10px;
        border: 1px solid #f2f2f2;
        font-size: Arial;
    }
    
    .article h1 {
        margin: 0;
        padding: 5px;
        background: #f2f2f2;
        font-size: 16px;
    }
    
    .article p {
        padding: 5px;
        font-size: 14px;
    }
    
    :target {
        border: 1px solid yellow;
    }    
​
    :target h1 {
        background: yellow;
    }
    
  </style>
</head>
<body>
  <div id="bookmark-1" class="article">
    <h1>Article 1</h1>
    <p>Article 1</p>
  </div>
  <div id="bookmark-2" class="article">
    <h1>Article 2</h1>
    <p>Article 2</p>
  </div>
  <div id="bookmark-3" class="article">
    <h1>Article 3</h1>
    <p>Article 3</p>
  </div>
  <script>
    
    // this line is only to show how it works inside embedded online example
    location.href = '#bookmark-2'; 
    
  </script>
</body>
</html>