Assign a particular CSS class to the second Span element

Is there a way to only apply a specific background color to the second span with class "ui-steps-number"? I tried implementing a CSS class but it seems to be ignored:

CSS

.ui-steps-number:nth-child(2) {
    background-color: yellow !important;
}

html

<ul role="tablist">
    <li class="ui-steps-item ui-state-highlight" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">1</span>
            <span class="ui-steps-title">QUALIFICATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">2</span>
            <span class="ui-steps-title">ANALYSIS</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">3</span>
            <span class="ui-steps-title">QUOTE</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">4</span>
            <span class="ui-steps-title">NEGOTIATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">5</span>
            <span class="ui-steps-title">CLOSED</span>
        </a>
    </li>
</ul>

I appreciate any assistance!

htmlcss

Answer №1

To resolve the issue, focus on the second <li> element in the code snippet below: 

.ui-steps-item:nth-child(2) .ui-steps-number {
    background-color: yellow !important;
}        
<ul role="tablist">
    <li class="ui-steps-item ui-state-highlight" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">1</span>
            <span class="ui-steps-title">QUALIFICATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">2</span>
            <span class="ui-steps-title">ANALYSIS</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">3</span>
            <span class="ui-steps-title">QUOTE</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">4</span>
            <span class="ui-steps-title">NEGOTIATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">5</span>
            <span class="ui-steps-title">CLOSED</span>
        </a>
    </li>
</ul>

Answer №2

Give this a shot: 

.ui-steps-item:nth-child(2) .ui-steps-number {
      background-color: yellow !important;
}

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

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

The page jerks as the carousel adjusts its height and content

There's an intriguing issue I'm encountering on my webpage with the bootstrap carousel wrapped inside a wrapper set as position:absolute. When the page is slightly scrolled down and the next carousel-item has a different height, the page abruptly ...

htmlcssbootstrap-4bootstrap-carousel

What is the best way to keep a bootstrap navbar fixed at the top when scrolling? (It's a bit tricky)

Check out this image of my website header. HERE Is there a way to achieve a smooth scrolling effect for the blue navbar as I scroll down the page? (Specifically just the navbar, excluding the logo and social media elements). Using position:fixed; does ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss

The nightmare of centering with margin:auto

I've exhausted all my options trying to center the navigation menu, but I just can't seem to get it right. I've experimented with text-align, margin-auto, block display... on both the parent and child elements. It's frustratingly simple ...

htmlcssxhtmlcentermargin

Interactive Thumbnail Selection for HTML5 Video

Having trouble with creating thumbnails? I managed to solve the cross-domain issue using an html2canvas PHP proxy. No error messages in the Console, but the thumbnails are unfortunately not showing up - they appear transparent or white. Here is a snippet ...

javascriptphphtml

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...

htmlreactjs

One CSS file linked, but only one is applied; the other is left unused

After including two CSS files, I am experiencing an issue where only one of them is being utilized. The other file does not seem to be included and the reason behind this remains unknown. My website has a standard header file that is present on all pages. ...

css

Is there a way to add a clickable icon to a form-floating label in Bootstrap 5?

I'm having trouble getting a clickable icon to work properly in a form-floating label. It seems that the label is being rendered behind the input field. I've tried adjusting the z-index with no success, and I'm not sure what else to try to ...

c#htmlcssbootstrap-5

Choosing more than one item to submit may pose an issue - the POST request will be empty

One of the challenges I'm facing is with a multiple select feature like the one below: This allows for selecting various options, such as 3 sports in this case. Successful form submission occurs when items are selected correctly. However, if no spor ...

jqueryhtmlformspostselect

Modifying the opacity of the placeholder in Stripe Element is not possible

The placeholders of Stripe React elements come with a CSS property Opacity: 1. Unfortunately, this property cannot be modified using the style object. However, other ::placeholder CSS properties can be adjusted as needed. Style Object: const iframeStyles ...

cssreactjsfrontendstripe-paymentspayment

Inspector, please demonstrate how to receive the most recent value from the 3-second update

On my index.php page, I have a JavaScript function that retrieves JSON data from data.php every 3 seconds. The data.php file ends with the following line: echo json_encode($row); When inspecting the index.php page, I see a few objects that are refreshe ...

javaphphtmljsonajax

Utilizing the enter key function for form submissions on lists in AngularJS

In my AngularJS project, I am working on an account details page where users can update their personal information. The interface allows for multiple phone numbers and email addresses to be added. Currently, the functionality works well with mouse input or ...

htmlformsangularjsform-submit

Using JQuery to eliminate div elements

I've been struggling to implement the remove function on my HTML page without success so far. I have three rows, each with a remove button, and I want to create an effect where clicking on the remove button makes the entire row disappear. Any assistan ...

javascriptjqueryhtml

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

javascriptjqueryhtmljson

Ensuring the continuous transmission of data frames is essential for WebSocket communication

Our system utilizes websocket technology to transmit user activity events such as clicks, mouse movement, scroll, input, and more. In addition to these events, we also send a snapshot of the HTML DOM. On average, the size of the HTML snapshot is approximat ...

javascripthtmlwebsocket

Issues with the functionality of the submit button in Jquery Mobile

Hey everyone, I'm currently developing a web application that features a menu on the left side and a div container on the right. When I click on any of the menu items, the content from other pages should be displayed in the div using Ajax. Here is the ...

phpjqueryhtmlajax

What is the method to retrieve an object by using a variable containing a string?

I am facing an issue with linking object names and anchor titles in my code. I want to store the title of an anchor element clicked by the user in a variable called sprite, which should then correspond to the name of an object. Here is the current version ...

javascripthtml

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

javascriptjqueryhtmlcsssyntax-highlighting

arranging a div after it has undergone rotation

I have an idea to create a div containing three texts, rotate it, and place it in a fixed position on the page. My goal is to make sure it fits perfectly on the screen. To achieve this, I initially created a div with height and width that were the opposit ...

javascripthtmljquerycsspositioning