Languages
[Edit]
EN

CSS - :target peseudo-class example

12 points
Created by:
Root-ssh
6357

: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

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
// ONLINE-RUNNER:browser;

<!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>
:target pseudo-class simple example
:target pseudo-class simple example

2. Target navigation link with menu example

// ONLINE-RUNNER:browser;

<!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>
:target pseudo-class with navigation menu (link) example
:target pseudo-class with navigation menu (link) example

3. Article header styles example

// ONLINE-RUNNER:browser;

<!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>
:target pseudo-class with header element example
:target pseudo-class with header element example

 

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.