Tips for adjusting the color of multiple <a> tags?

One issue I am facing is the color of the .row a element impacting my contact link, making it white. Despite attempting to change it to red, the color remains unchanged, but upon hovering it turns green.

.row a {
  color: white;
  text-decoration: none;
}

a.contact:link {
  color: red;
}

a.contact:hover {
  color: green;
}
<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

  <div class="contact">

    <h2>Phone:</h2>
    <p><a href="tel:+00000000" target="_blank">00000000</a></p>

  </div>
</div>

I have also attempted adding a class within like this with no success,

<p><a class="contact" href="tel:+0000000" target="_blank">0000000</a></p>

How can I adjust the color of my phone link?

htmlcss

Answer №1

When the vacuum cleaner is in operation, it turns green.

The current code does not support this functionality. To achieve it, you need to either apply the class directly to the link or use it in a descendant selector like you did with the row class.

To see the desired behavior, make the necessary adjustments as explained above.

The CSS pseudo-class :hover functions correctly, but :link won't work because the link has already been visited.

:link targets only unvisited links (while its counterpart is :visited).

Since the link has been visited, the only matching styles are those within .row a.

To resolve this issue, consider removing the requirement for the link to be unvisited (using either a.contact or .contact a) or add a style for visited links (e.g., 

.contact a:link, .contact a:visited {}
).

Answer №2

To make the necessary adjustments, you only have to modify these two classes:

.contact a {
  color: blue;
}

.contact a:hover {
  color: purple;
}

This is because you are targeting the elements by their class name and then applying styles to all anchor tags within them.

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

It appears that the React MUI Grid is causing the page or its container to experience overflow issues

I'm utilizing Grid to maintain the organization of the entire page, but I keep encountering an overflow issue when adding multiple Grid items. This results in the scrollbar appearing even though the container size remains the same. Dashboard.tsx is pa ...

cssreactjsmaterial-ui

The appearance of the drop-down menu in IE is not the same as in other

I have implemented css bootstrap 3.2.0 on my website. However, I have noticed some discrepancies when viewing the site in Internet Explorer. The menu options have a thick black border and the dropdown menu button appears different compared to other browse ...

csstwitter-bootstrap

Tips for utilizing bootstrap.css to position a web design form in the center of the page and place the copyright at the bottom

I have spent several hours trying to figure out how to achieve this, but still haven't found the solution. I have a form that I believe doesn't look very good: So, I attempted to center the form on the page and place the footer.php at the botto ...

jqueryhtmlcsstwitter-bootstrap

Having issues making div elements with javascript

I am having trouble generating new divs when a specific div is clicked. Despite my efforts, nothing seems to be happening and the console isn't showing any errors. I've searched online for solutions but haven't found anything that addresses ...

javascriptjqueryhtmlcss

What are the steps for adding information to a MySQL database with GWT, HTML, and either JDBC or Hibernate?

I have been working with GWT (Google Web Toolkit) version 2.5.1 and successfully developed a sample application to display the username and password. However, I am now facing challenges in inserting these values into a MySQL database table using JDBC or Hi ...

mysqlhtmlhibernategwt-rpc

The Bootstrap Grid Leaves Blank Spaces Unfilled

View the screenshot here Take a look at the image above. I'm struggling to fill the empty space with div elements. I've experimented with display:inline-block and other display properties, but they haven't yielded the desired results. < ...

htmlcssbootstrap-4

Progress bar displaying during Ajax request

I'm currently working on an Ajax request that uploads images to the Imgur API and I want to implement a progress bar to show users the upload progress. I found some guidance in this thread, but it seems to display only 1 and stop working. This is the ...

javascriptjqueryhtmlajax

Having difficulty comprehending the syntax of Linear Gradients

Seeking assistance on understanding how background images and linear gradients function together. Currently, I am only seeing a solid color instead of the intended image. Can someone please explain how this code is supposed to work? background-image:lin ...

cssuser-interfacebackground-imagelinear-gradients

posting data and redirecting fails when using an ajax button

I am encountering an issue where I click a button on a page to navigate to another page with posted data, but it is redirecting without posting anything. Both $_POST and $_SESSION variables are empty. Below is my ajax function: function ajax4(Div_Submit, ...

phphtmlajaxredirectpost

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

javascriptjqueryhtmlajaxjsp

Proper application of article, aside, and header elements

Can someone help me with my page template setup? I have a sidebar on the left and main content area on the right. I'm wondering if I am using the article, aside, and header tags correctly. Also, should I attach classes/ids to html5 elements or is that ...

csshtml

What is a solution to prevent style.css from being recognized as the Jekyll Page?

Currently, I am utilizing an expression {% assign mypages = site.pages | sort: "order" %} {% for page in mypages %} {% unless page.exclude %} <a href="{{page.url|absolute_url}}"> {{ page.shortname }} <span class="rate">{% include indexmod.h ...

cssrubyjekyllliquidgithub-pages

What is the optimal location for storing numerous blocks of text (without utilizing a database)?

If I have a control used on 10 different pages with a help icon, each page needs to display its own unique paragraph of help text. The selection of which help text to show is determined by a JavaScript function. In my scenario, having 10 paragraphs will n ...

c#htmlasp.netweb-applicationspage-lifecycle

What is the process for including icons on buttons?

I have been researching how to use Font Awesome software to incorporate icons into my HTML elements, but I am uncertain about the implementation process for my specific case. Currently, I have created a basic webpage with buttons and I would like to includ ...

htmlcss

What is the best method to eliminate the 2px flaws on the right edge?

Issue only observed on small screens using Android Chrome (Nexus 5x, Nexus 6) with Android 5+. Cannot replicate problem on a Nexus 4. Utilizing basic bootstrap setup and angular; unsure if related. Experiencing artifacts up to 2px wide on the right side o ...

androidcssangularjstwitter-bootstrapgoogle-chrome

Customizing the styling of a TextField component in ReactJS using material-ui

I am currently working with Reactjs and material-ui. I am looking to apply some custom styles to a TextField using css. Specifically, I would like to change the color of the TextField underline and label when the input is clicked. Although I know it can b ...

javascriptcssreactjsmaterial-ui

AngularJS bidirectional binding with numerous select choices

I am faced with a unique challenge - I have a list of non-exclusive fields that users want to see presented in a select box allowing multiple selections, rather than individual checkboxes bound to Boolean values in the model. While I know how to create t ...

angularjshtml

jQuery fails to apply a class if the input fields are not empty

I am currently working on a function that displays a login button only when both input fields are not empty. However, for some reason, jQuery seems to be giving me trouble with this task. Despite checking and ensuring that I am using the correct and updat ...

jqueryhtml

Establishing space between table rows

I need to create a specific margin between two rows in a table. In my css code, I have the following snippet: background-color: #72c2dd; margin-top: 25px; The background-color is being applied correctly, but the margin-top property is not working as int ...

htmlcssmarginhtml-table

Unveiling the Power of Angular in Handling Date and Time

Recently, I encountered an issue with the following code snippet: <ng-template>{{date:'MM/dd/yyyy h:mm:ss a Z'}}</ng-template>. This code displays a date and time in one long line. My goal is to insert a line break between the date an ...

cssangularjs