Mastering the art of changing text color based on element class name in CSS3

Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved?

Demo:https://stackblitz.com/edit/angular-gr8adt?file=src%2Fapp%2Fapp.component.css

This question is unique and not a duplicate.

CSS:

   .green{
   color:green;
   }

   .gray{
   color:gray;
   }

   span.arrow < li {
   color:green;
   }

   span.gray < li {
   color:green;
   }

HTML:

          <ul> 
           <li><span class="green"></span>Car</li>
           <li><span class="green"></span>Bike</li>
           <li><span class="gray"></span>Plan</li>
           <li><span class="gray"></span>Cycle</li> 
           </ul>

Answer №1

Yes, you're on the right track, just remember to enclose the text within the span tag

Here is an example of how it should be done:

<ul> 
       <li><span class="green">Apple</span></li>
       <li><span class="green">Banana</span></li>
       <li><span class="orange">Orange</span></li>
       <li><span class="yellow">Lemon</span></li> 
 </ul>

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

Design a personalized select element with a unique background hue

https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

The Ultimate Guide to Setting up SVG's Viewbox, Width, and Height for Scalability and Responsiveness

As a beginner in SVG design, I find it challenging to scale, zoom in/out with the container and ensure responsiveness across different devices. I wonder if it's possible to create an SVG that adapts to all device sizes and effectively handles browsin ...

Contrast between using tbody td:nth-of-type(3){ border-bottom-color: transparent; } and tr.noborder td{ border-bottom: transparent; } within CSS styling

First Situation: h1{ text-align: center; } td{ width: 100px; height: 100px; border-right: 1px solid gray; border-bottom: 1px solid gray; } table{ margin: 0px auto 0px auto; } tbody td:nth-of-type(3){ border-right-color: transparent; } tbody tr:nt ...

Troubleshooting a CSS layout problem: Organizing a webpage layout using CSS that includes an

I am currently facing an issue with arranging a container inline and it seems like there is something missing in my CSS code. After applying float:right, the class "second" does not seem to work as expected. Here's how my container is structured: &l ...

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

Tips for enabling auto-scroll feature in MuiList

Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sen ...

Utilizing media queries and JQuery to display a variety of menus based on screen

I have created a hamburger menu specifically for smaller screens, and it is functioning properly on small screens. However, I am facing an issue where if the menu is not open before resizing the screen to a larger size, the menu does not show at all. When ...

Utilizing erb within a coffeescript file for modifying the background styling

Is there a way to change the background image of a div based on user selection from a dropdown menu? For instance, if the user picks "white" the background image becomes white, and for "red" it changes to red. I'm struggling with this in coffeescript ...

After sending a test email, inline CSS in Gmail seems to be functioning to some extent

While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem? Steps to reproduce: Step 1 - apply CSS st ...

Deactivate click events in the container div

Here is the html code snippet that I am working with: <div class="parent" ng-click="ParentClick()"> . . . <div class="child" ng-click="ChildClick()"> Some Text </div> </div> When clicking on Som ...

What is the functionality of this pseudo element?

I am interested in understanding the purpose of the pseudo element and how it affects the layout without altering the existing markup. Check out the code demo div{ border: 1px solid #000; height: 300px; } div:before{ content: ""; ...

Chrome behaving differently with CSS for pop-out menu

My issue lies with a pop-out menu behaving differently in Chrome compared to IE or Firefox. Below is the HTML code: <body> <ul> <li><a href="url">Level One</a> <ul> <li><a href="url">Le ...

Exploring the jungle. Cursor acting strange while dragging

I am currently working on implementing drag-and-drop functionality in my project, utilizing slip.js from slip.js. To enhance the cursor during dragging, I have assigned class="draggable" to each draggable <tr>. The CSS code for this class is: .drag ...

What is the best way to style multiple classes within the same element (specifically an ordered list ol

Using CSS counters, I have created various styles for an ordered list <ol> by applying different classes and adjusting the styles accordingly. Now, I want the counters to adjust based on screen size, displaying smaller numbers on smaller screens. To ...

Ways to display or conceal text using Vanilla JavaScript

I am struggling to toggle text visibility using Vanilla JS. Currently, I can only hide the text but cannot figure out how to show it again. <button id="button">my button</button> <div> <p id="text">Hello</p& ...

Enhancing Hover Effects in CSS with Additional Backgrounds

How can I create a div that changes its background to black with 50% opacity when hovered over, on top of an existing background image? Thank you! ...

Tips for generating an ordered list that begins with 01

Currently, I am developing a Ruby on Rails application in which I am iterating over the tuto. .container .row .col-xs-12.col-sm-12 h1.text-gray Tutorials br .col-xs-10.col-sm-5.index-background - @tut ...

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. https://i.sstatic.net/2kNk3.png code .html <div class="margin-top-4 ...

Create a right-to-left (RTL) CSS file within a create-react-app project and dynamically switch between them depending on changes

I am currently working on a multi-language project using create-react-app. My goal is to incorporate a library like "cssJanus" or "rtlcss" to transform the Sass generated CSS file into a separate file. This way, I can utilize the newly created file when sw ...