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

How can I only replace every second occurrence in a JS string?

The process of parsing HashMap failed due to an unexpected encounter with an Array, when an Object

Implement a new aggregate function for tooltips in the Kendo chart

Arrange Bootstrap columns based on the available space within a loop

Tips for remaining on the current page after sending a post request using Express

Discovering the values within a separate JSON object

Can anyone suggest a way to detect if a website visitor has previously visited the site using jQuery?

Stylish Wave Animation Effects in CSS for iPad Native Application

Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

When using Ionic, clicking on a Google Maps marker to navigate to another page with NavController can sometimes result in the clicks on the new

Achieving equal height rows in Bootstrap to fill the page height

Implementing a change event upon setting a value to an input element using JavaScript

Using Typescript to change a JSON array of objects into a string array

Having trouble getting Laravel Full Calendar to function properly with a JQuery and Bootstrap theme

What could be the reason my mat-form-field is not displaying the label?

Tips for iterating through an array of images and displaying them in a React component

jQuery toggle buttons to show or hide on radio button selection

"Enhance your website design with a navbar that seamlessly blends with the background color

Difficulty linking CSS to HTML in a Flask web application

Preventing React setState from replacing the entire object