Adjust the color of the chosen <li> item to a different shade

I want to change the text color of the "Sale" item, but not a phone number using only CSS. Unfortunately, I am unable to modify the HTML code.

https://i.stack.imgur.com/PPnna.png

.menu.left a:first-child {
    background: yellow;
    color: red;
}

https://i.stack.imgur.com/TfSjM.png

It displays in both yellow and red colors


.menu.left li:nth-child(2)`
    background: yellow;
    color: red;
}

https://i.stack.imgur.com/EP352.png

Only the background appears in yellow


Any suggestions on how to resolve this issue?

Answer №1

To change the font color to red, you can target either the <li> element or the <a> element. When targeting the second <li> and then the <a>, the font will change to red. However, if you only target the <li>, the font will not change to red.

If you need further assistance or a better solution, feel free to ask for help.

Here is an example of targeting the <a>:

.menu.left li:nth-child(2) a{
  background-color: yellow;
  color: red;
}
<ul class="menu left">
  <li>
    <a href="#">1231233123</a>
  </li>
  <li>
    <a href="#">Sale</a>
  </li>
</ul>

And here is an example of solely targeting the <li>:

.menu.left li:nth-child(2){
  background-color: yellow;
  color: red;
}
<ul class="menu left">
  <li>
    <a href="#">1231233123</a>
  </li>
  <li>
    <a href="#">Sale</a>
  </li>
</ul>

OP's Comment:

"Gerardo, thank you for your solution. It worked well, but I encountered issues with the mobile version of the link. Could you please take a look? Here is the codepen: codepen.io/anon/pen/xYJKRW "

In response to your comment, when dealing with the mobile version of the link, make sure to target the <a> element instead of the <li>. Try this code:

[data-mobile-dropdown-rel="sale"] a {
  color: red;
}

Answer №2

.navigation.right li:nth-child(2) a {
    background: orange;
    color: blue;
}

Answer №3

Include color:red; in the style for .menu.left li:nth-child(2), while maintaining the current background:yellow;. The goal is to adjust the font color of the <a> tag, not the <li>.

Answer №4

Here's how it should function:

ul.menu li:nth-child(3) a {
    background-color: green;
    color: blue;
}

Answer №5

To modify the color of <a> elements, you must directly change the color within each <a> tag. Trying to alter the color of <li> tags will not achieve the desired effect in this scenario. Make sure to target the correct element for successful color changes.

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

Move the components over to the right

How can I vertically align the user and the search bar on the right side of the page? #search { float: right; margin-top: 9px; width: 250px; } .search { width: 230px; height: 30px; position: relative; line-height: 22px; } ...

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

Imagine I have the following sentence written in HTML: <p>Please input your licence number</p> An issue arises when a screen-reader pronounces the word 'licence' as "liss-ens" instead of "lice-ens." To resolve this, I aim to provide ...

Automatically remove the entered data

Let's say I have a text input field with the initial value of "insert text here" coded like this: <input type="text" value="insert text here" /> What I want is for the text inside the input field to disappear automatically when the user clicks ...

Fluid Design - Extra Spacing at the Bottom with Percent Margin-Top

Currently, I am working on developing a website using only percentages. However, I have encountered an issue with my main content section. I have set a margin-top of 10%, but this is causing excessive spacing at the bottom of the page and resulting in a sc ...

Prevent event propagation in jQuery by using .stopPropagation() when hovering over a

When trying to implement event.stopPropagation() in a specific scenario, I encountered an issue with a blinking background image on my submenu. To address this, I added a pseudo-element (background:green) to the parent element by toggling a new class using ...

Enhance your textbox with more detailed descriptions than just displaying NaN

I am working on a form that includes select boxes. If a user selects an option from "Convert From" and another option from "Convert To" but does not enter a number in the input field, instead of displaying NaN in the result text box, I would like to show ...

What is the procedure for eliminating the underline located at the bottom of the table?

Can anyone please assist me with removing the underlines at the end of the table? I find it quite unattractive and can't seem to figure out how to remove it. https://i.sstatic.net/stvHt.png https://i.sstatic.net/YYbrX.png Below is the code snippet ...

Tips for fashionable dressing &

Can you provide some insights on how to format the &amp; symbol in this HTML snippet? <a>Ian</a> &amp; <a>Jim</a> ...

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

Having trouble with this script. The opacity transition works fine, but there seems to be an issue with the loop causing it to run indefinitely. My goal is to change the z-index once the opacity reaches 0. HTML <div class="ribbon_services_body" id="ri ...

Tips for positioning an MUI element inside a container to extend to the edge of the browser window

Currently, I'm working on a project with a Material-UI (MUI) container that contains a Stack element. Within this Stack, there are two Box elements displayed in a row, each set to take up 50% of the width. In my design, I want the second box to break ...

Customize default progress bar in browsers

One feature of my website allows users to update their personal information, profile image, background image, and more. After clicking the submit button, a loading screen appears with a progress percentage displayed at the bottom left corner of the page (i ...

How can I center the navbar logo and use it as a toggle for collapsing the menu?

This is a simple example of a navigation bar <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class ...

My desire is to have the left image's position set as sticky

Currently, I am attempting to update the image positioning on this page for the T500 Smart Watch: I want it to look similar to how it appears here: Here is the CSS code I have experimented with: .storefront-full-width-content.single-product div.product ...

Apply an image as the background for the body using Bootstrap 5 styling

I'm wondering how I can set the background of the whole webpage (the body) to an image. I'd like to add a subtle fade effect to avoid it being too overpowering. <style> body { background-image:url("{% static 'portfolio ...

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...

What is the best way to make my div equal in height to its preceding div sibling?

I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions f ...

Ensure that the display is set to block to stack the input elements on top of each other

I am attempting to grasp the functionality of CSS display property and experimented with this basic HTML code: <div> <form className="container" action=""> <input name="fName" placeholder="First Name" type="text" value={props.fNam ...

Issue with calling a function to change the CSS color class of a button in Angular

Within my Angular code, I am attempting to set a CSS color for my button by calling a TypeScript function that will return the appropriate CSS class name. This is the code I have tried: <button style="height: 10%" class="getColor(days.date)">{{days ...

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: g ...

Steps for resolving "TypeError: Unable to read properties of undefined (reading 'useSystemColorMode')"Ready to overcome this particular error message?

While working on a project with ChakraUI and React JS, I encountered an error at the start that read, "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')". I have not made any changes to the global theme in Chakra, j ...