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

Using flexbox auto margin within nested elements: A guide

Is it possible to achieve consistent margins between the heading and list items using flexbox? section { display: flex; background: #eee; } h1 { background: #bbb; } ul { display: flex; flex: 1; list-style-type: none; background: #ccc; ...

Phonegap enables iOS keyboard to dynamically adjust screen size during use

Currently, I am developing an iOS app using phonegap 3.0 and have encountered a particular issue. In my app, there is a window where users are required to enter a promo code. The problem arises when I click on the input area (see this example) and then pr ...

Arranging individual spans within a div using CSS for perfect alignment

My current code looks like this: <div id='div_selectores' class='row_titulo '> <span class="label_selector" id="lbl_show"></span><span id="div_selector_show"></span> <br /> <span class ...

Aligning text to the center and having it displayed on either side of it

Hey there, I need help with the following: <div id='1'></div> <div id='2'></div> <div id='3'></div> I want to place a single word into each div. The width of each div should be ...

Having trouble removing or adding a class to an HTML element?

I have a collection of three colored buttons. My goal is to allow users to select one button at a time, triggering it to be highlighted while the others are unselected. Each button corresponds to an object with a property called isSelected that can be set ...

styled components are having issues with background gradients and opacity not functioning properly

Hello, I am currently working with styled components and have the following global style code: const GlobalStyle = createGlobalStyle` html{ font-family: roboto; background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0 ...

Is it possible to reorganize the order of elements in a

My goal is to create a flex column layout where the image appears first. However, I'm facing an issue with the code below, as it only changes the order when the flex direction is set to row (image on the left). It does not work for rows. </head> ...

Ways to improve the quality of a blurred photo

I've recently put together a test landing page using bootstrap: Upon visiting the site and viewing the iPhone screenshot, it's clear that the text on the screen is quite blurry. Interestingly, by simply resizing the browser window and then maxi ...

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

What are some ways to change the appearance of a component using its parent?

In order to make changes to the CSS properties of a Vue component from its parent, effectively overriding any existing styles within the component, I am seeking a solution. Initially, I assumed that styling a component like <my-component> directly f ...

Emphasizing hyperlinks according to the user's scrolling location

Currently, I am attempting to create a feature where links are highlighted when the user scrolls over the corresponding section on the page. However, there seems to be an issue with the functionality as Link 2 is highlighting instead of Link 1 as intende ...

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected... What could be causing this issue? CSS Code: #page_bar { width: 100%; height: 30px; background-color: white } .page_bar { width: 800px; height: 30px; ...

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

What is the best way to specifically target header elements within article elements using a CSS selector?

As someone who is not well-versed in CSS, I am looking to target specifically the header elements within article elements. I have some understanding of selectors such as #, ., or ,. article header article, header article.header article#header I believe t ...

Swap out a button for another using JavaScript

I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the acti ...

When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success. Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution) The issu ...

What benefits does React offer that jQuery does not already provide?

What sets ReactJS apart from jQuery? If jQuery can already handle everything, why should we use React? I've tried to research on Google but still don't have a clear answer. Most explanations focus on terms like "views," "components," and "state" ...

Adding static files to your HTML page with node.js

This is not a question about using express.static() In my application, I have multiple pages that share the same JS and CSS dependencies. Instead of adding <script> or <link> tags to every single page, I'm looking for a way to include the ...

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as B ...