html: display the linked content in a bold format

Hello, I need help linking between 2 pages using this solution First page (first.html):

<a href="sample.html#abc">1</a>
<a href="sample.html#def">2</a> 
<a href="sample.html#ghi">3</a> 

Second page (sample.html):

<p id="abc">abc</p>
<p id="def">def</p>
<p id="ghi">ghi</p>

Question: Is there a way to style the element that the user is linked to using only CSS? I know it can be done with JavaScript, but I prefer to do it in CSS. Any help would be appreciated!

Example: If the user clicks on link 3 (ghi) -> the text 'ghi' turns red or is underlined

Thank you in advance! :)

Answer №1

You can achieve this by applying CSS :target selector. Visit the example link here: .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a soft focus on the background sans any filters

I am in the process of developing a website and have implemented code to blur out the background: CSS #background{ background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o ...

Unable to click on anchor tag in Internet Explorer 11

Hey everyone, I've been searching high and low for a solution to this problem with no luck. Below is the specific line of code I'm referencing: '<a id="auto_refinance_loan_documents_save_link" ' + ((scope.styleAsBtn) ? 'class=" ...

Using values from an appsettings.json file as href variables in an AMP html: a complete guide

Currently developing an AMP website with the URL www-dev.example.com, directing users to a sign-up page. The sign-up page is hosted on an identity server under the subdomain auth.www-dev.example.com. Now, the goal is to deploy the AMP website to a staging ...

The pointer-events attribute seems to be inactive and not functioning as expected

I recently implemented a design feature on my website where I created a transparent div at the bottom of the page to overlay a fixed div. The idea was for the fixed div to be revealed as the user scrolled down, but unfortunately, it seems that the click ev ...

Accessing the selected value from a dropdown list filled with data from a PHP array in HTML

My HTML and PHP code consists of a select dropdown that looks like this: <select name="category" id="_category" class="_cateogry" onchange="submitTheForm() > option value="">Please select</option> <?php foreach ($categories as $cont ...

A menu displaying a selection of the text

When using IE9, my drop down list only displays part of the text. For example, if I select "Hello World", it only shows "Hello". I tried disabling the CSS and discovered that the issue is caused by the following code: .ui-widget { font-family: Verdana; f ...

A fixed position header adjusts based on the content's offset

In the body of my web page, I have a fixed header and a div#content element. My original intention was to have the content pushed under the fixed header using the margin-top attribute. However, I noticed that when I applied this style, the header also move ...

Display a <div> based on the database query for the portal field

I am new to JavaScript and have been successfully using the code below with a checkbox. function showAddress() { var objectAddress = document.getElementById("objektadresse"); var addressToShow = document.getElementById("adresseeinblenden"); addr ...

Inputting information into a text field and subsequently modifying it

I've created a text box that pulls its text from a variable connected to a database. ee from the employee class and s from the general class are both functioning correctly, and the data within ee is accurate. Upon loading the page, the textbox displ ...

Is incorporating CSS advisable in Karma Unit level tests for AngularJS projects?

Imagine your JavaScript code is running some element or position calculations within an AngularJS directive. When testing this JavaScript code, should CSS be included in karma.conf.js? I've noticed that some popular projects have included CSS files. ...

Enable users to modify the URL in the window.open() function

In the code snippet below, a new window opens when a user clicks on a button: $('.loginButton').click(function () { var strString = $("#medlineSearch").val() var strSearch = "http://google.com&query="; var url = strSearch + strSt ...

Trigger the running of a python script by clicking a button

On my HTML page, there is a single button that is supposed to trigger the execution of a python script upon being clicked. The goal is to receive the result of the script and display it on the same HTML page. The process involves validating the return val ...

Animation in CSS Appears Jumpy in Chrome

For some reason, the text inside a moving div (which is transitioning using CSS) seems to jitter and shake in Chrome. However, this issue does not occur in Firefox, where the movement is very smooth and achieves the desired effect. #hidexpert { display: b ...

Unable to watch video on android webview

I'm currently developing a mobile application for Android using PhoneGap, and I'm having trouble with playing HTML5 videos on my web page. The video is not visible and does not play automatically. How can I successfully play a HTML5 video on an A ...

What causes Bootstrap to display two cards simultaneously when collapsed?

Here is the Bootstrap Collapse code I am using: <section class="download bg-primary text-center"> <div class="container"> <div class="row"> <div class="col-12 col-md-2"> ...

The execution of jQuery was hindered due to the implementation of PHP include

Having an issue with jQuery not working in index.php when including the file header.php. The nav sidebar is included, but clicking the chevron does not trigger anything. It only works when I directly include header_user.php without checking the UserType in ...

The dropdown button becomes unresponsive when attempting to navigate within it using ajax requests

Hello fellow members of the StackOverFlow community, I recently implemented a Bootstrap 5 dropdown button to fetch tabs from the backend using AJAX. Everything was functioning correctly until I encountered an issue where, upon clicking a button within one ...

Right-align the span and vertically align the header to the left

Seeking guidance on aligning a span to the right of a div, where the span is nested within a button. Although I have successfully achieved the above, I am encountering difficulties in vertically aligning the header while also keeping it to the left. .s ...

Media publications do not conform to the current trends

I'm currently utilizing the HTML-to-paper plugin to print my content on a printer. However, I've encountered an issue where it doesn't seem to apply any of the styles I've defined within @media print. The challenges I'm encounteri ...

Can a child element be positioned above its parent's y-scrollbar using CSS?

I have created a selection box using <ul> and <li> elements. Some of the list items are wider than the parent box, so I used an :after pseudo-element to overlay them with full content when hovered over. Everything was working perfectly, until ...