Is there a way to modify link colors within a table utilizing CSS without the need for the "class" parameter or access to the HTML file?

I am currently working on giving a complete overhaul to an ancient website that I don't have access to its hosting server. The HTML is outdated from the 1990s, and there are many glaring errors in the code which make it difficult to fix without causing issues elsewhere on the site

My current task involves adjusting the content in a problematic table. Is there a way to use CSS to color all of the links within that table? I want to apply specific styles to those links using parameters like:

a:link
a:hover
a:active
a:visited
a:visited:hover

Up to this point, I was able to change the text in the non-linked part of the table with:

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(7) > b:nth-child(1) > font:nth-child(1)
{
color: #ffffff !important;
}

and adjust the two linked parts with:

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1) > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1) > b:nth-child(1) > font:nth-child(1)
{
color: #ff0000 !important;
}

However, when attempting to add something like

> a:hover

or changing their end to

font:nth-child(1)a:hover

the changes get reverted back to the default color. Since I'm creating a CSS theme for Stylish addon in Firefox, I can't modify the code directly to incorporate classes as they were not used in the original HTML. Is there a workaround to add hover effects to these links?

This problematic table exists on a sub-page, while emphasis has been placed on improving the aesthetics of the main page. Some style parameters might be transferrable to this sub-page. However, it remains the only table within the site if that information helps in finding a solution.

[Apologies if my terminology is incorrect, I'm not a programmer but just someone tweaking some code]

Below is the original HTML code:

<table cellspacing="7" cellpadding="0" border="0" bgcolor="#000000">
<tbody><tr>
<td></td>
<td></td>
<td><b><a href="https://[-FIRST-LINK-]"><font color="#999999">-TEXT-OF-FIRST-LINK-</font></a></b>
</td>
<td></td>
<td>
<a href="mailto:[-SECOND-LINK-]">
<b><font color="#999999">-TEXT-OF-SECOND-LINK-</font></b></a></td>
<td></td>
<td><b><font color="#999999"-TEXT-OF-THE-ONLY-NONLINK-</font></b>
</td>
</tr>
</tbody></table>

Answer №1

The child selector is specifically designed to target direct descendants. This means that once you have identified your anchor element, you can then apply styles for hover, active, and focus states.

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):hover > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):active > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) >... (Text too long to rewrite, consider trimming it)
...  {
    color: #00ff00;
}

If these :nth-child selectors, as well as the b and font selectors, are essential depends on your specific HTML structure. Without seeing your HTML code, it's hard to determine if any adjustments are needed for this selector.

The :active state applies when holding down on a link, while the focus state activates when accessing the link via keyboard or mouse click.

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

What is the best way to populate the open areas on a grid using HTML?

I'm facing an issue with my note-taking app where, in a grid layout, short notes leave empty space. How can I push the cards below to move up and stick to the top card? I am currently using Bootstrap's grid layout for displaying the cards. You ca ...

What is the best way to implement iscroll4 in an iPad2 using CSS?

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> ...

What is the best method for linking my chatbot's user interface to the API.AI server host using either the Python SDK or JavaScript

Looking for a way to seamlessly integrate my chatbot UI, created using HTML and CSS, with the API.AI server using the token provided by API.AI and Python SDK? Below is the HTML code snippet for reference: <!DOCTYPE html> <html> <head> ...

Is it feasible to create a full-page text gradient clip without it repeating on each individual element?

.gradient { background-color: #00ccaa; background: linear-gradient(0deg, #00ccaa, #f530a9); background-size: cover; background-clip: text; box-decoration-break:slice; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -web ...

Explore various THREE.JS 3D models through a clickable link

I am struggling to make each object open a new page using a URL when clicked. No matter what I try, it doesn't seem to work properly. Can someone point out what I might be missing or doing wrong? Here is the click event code for the objects. If needed ...

Looking for a solution to indent the start of each stanza in Google Blogger since it automatically removes <p> tags

Here's a recurring issue that has been brought up before, but I'm not here to discuss inserting <p> tags. Imagine you're using the Google Blogger "Compose" editor and have this text: Lorem ipsum dolor sit amet, consectetur adipiscing ...

The Countdown feature is experiencing loading difficulties

DISCLAIMER: THIS IS NOT SCHOOLWORK! Currently enrolled in an HTML/CSS course, I have reached the Javascript section. To better understand the homework assignments, I start by replicating the example problems provided in the textbook. However, when I ran t ...

Content within division on top of dark overlay WITHOUT transparency

I am currently working on an on-boarding design similar to Medium's, where text is centered within a box with a black overlay and a background image. https://i.sstatic.net/dUt0I.png However, I am facing difficulty in preventing the text inside the d ...

Tips for including background pictures in the jumbotron using bootstrap

I've recently delved into bootstrap just a couple of days ago. Now, I'm encountering an issue where I can't seem to add a background image to my entire webpage or even the jumbotron specifically. I've attempted to directly input the pa ...

The Bootstrap CDN is malfunctioning and displaying errors in the console

I attempted to incorporate Bootstrap 4.5 using the CDN provided on their main website. However, after adding all the code lines to my project, I encountered numerous issues with my custom CSS and the Bootstrap carousel failing to function. Upon inspecting, ...

Utilizing the p tag to incorporate dynamic data in a single line

I am currently working with two JSON files named contacts and workers. Using the workerId present in the contacts JSON, I have implemented a loop to display workers associated with each contact. The current display looks like this: https://i.sstatic.net/AR ...

The background image is not adjusting properly to the browser when resized

I'm having trouble keeping my background image fitted to the browser when I resize the window. Can someone please assist me with this issue? Here are links to images that illustrate what's happening: View images. The first image shows how it shou ...

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

MUI CSS: Mastering image manipulation

My MUI React Component features a Card that contains an image and buttons <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]"> <img src={meme.url} className="center bg-cover" alt="" /> <Box cl ...

Adding space between Bootstrap columns to align them one below the other on small devices

https://i.sstatic.net/turhY.png Within this illustration, there are two columns - one with the class col-sm-3 and the other with col-sm-8, situated in a single row. Upon resizing the window (as shown in the screenshot provided), the two columns appear ...

Navigating the art of employing different fonts for a website

I am looking to incorporate the trainway font into my website, but I'm concerned that the user may not have it installed on their device. Is there a way to showcase text in a specific font without requiring the user to download and install it? Thank ...

Designing a dynamic button with changing colors using html and css

Is there a way to design a button with a starting color of red, but changes to orange when the mouse hovers over it? I am looking to add this type of button to my website. ...

Lock GridView headers when only scrolling vertically

I am facing an issue with my gridview on an aspx page. The gridview is wider than the page itself, so I want the headers of the gridview to scroll horizontally along with the content, while remaining fixed vertically. Can anyone help me achieve this? I hav ...

Guide to adding a CSS class to an Ionic2 toast

i found a helpful resource on applying cssClass to my toast component. within my HTML, I have buttons: <button ion-button (click)="presentToast()"> toast</button> Here is the code snippet from my .ts file: presentToast() { let toast = t ...

What is the best way to display a Bootstrap toggle?

I am facing an issue with a Bootstrap toggle in a Handlebars template. When the page initially loads, the toggle is visible, however, after re-templating the Handlebars template that contains the toggle, it disappears. Before Re-Template: Initial code : ...