Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Question

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the destination page to yellow, while link2 turns it black.

My query is: do I need to create separate copies of the website for each of the 4 different links, or is there a CSS trick or alternative method that can achieve this without duplicating the site multiple times?

javascript html css frontend

Answer 1

Answer №1

Have you ever thought about utilizing the power of the :target pseudo selector in CSS to dynamically change styles based on the URL's #anchor value? Take, for instance, a scenario where the URL is www.mysite.com/test.html#black.

div#black:target {
 background-color: black;
}

div#yellow:target {
 background-color: yellow;
}

div.page {
 min-height: 100vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body>
    <div id="black">
      <div id="yellow">
        <div class="page">
          <h1>Content</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

Have you ever thought about utilizing the power of the :target pseudo selector in CSS to dynamically change styles based on the URL's #anchor value? Take, for instance, a scenario where the URL is www.mysite.com/test.html#black.

div#black:target {
 background-color: black;
}

div#yellow:target {
 background-color: yellow;
}

div.page {
 min-height: 100vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body>
    <div id="black">
      <div id="yellow">
        <div class="page">
          <h1>Content</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Answer №1

Similar questions

When viewed on a mobile device, the entire HTML document is resized to occupy less than half of the

Rows per page options fail to display in the DataTable component

In CSS, when text within a tab div lacks spaces, it triggers a horizontal scrolling effect

Adjusting the spacing between the logo and navbar in HTML code

Unexpected behavior occurs when ajax is added to an array for jQuery promise results

Adjust the tooltip image alignment to be offset from the cursor and appear at the bottom of the page

Tips for configuring ejs data within the data attribute and processing it using client-side JavaScript

Problem: Values are not being posted with AJAX when using $(form).serialize()

Can an input element be used to showcase a chosen image on the screen?

Generate a dynamic text-box and drop-down list using HTML and JavaScript

It appears that the SignalR proxy is not defined

A beginner's guide to integrating Socket.io with Express.JS using the Express application generator

Ways to stop your Browser from Caching

Troubleshooting Material-UI Menus

What are effective ways to design a dialogue or conversation with CSS styling?

Positioning the HTML form in the middle of the page

Create a recursive array structure that contains two distinct data types and specific guidelines

Pass function A as a prop, then trigger a different function when the child function calls A

What is the method of generating an HTML tag solely using CSS?

Crash in the Android WebView of the Galaxy S3 device due to Signal 11 SIGSEGV