What is the best way to choose the nth odd child that is not a direct child element?

I have been attempting to utilize the nth-child selector to assign a different background color to every odd element with the class "progress-bar." Unfortunately, I am only able to change the color of the progress class. I seem to be unable to target the specific element I want.

  <div class="col-sm">

<h2 class="progress_h2_one"> progress</h2>
          <div class="progress">

            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
<h2 class="progress_h2"> progress</h2>
          <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
<h2 class="progress_h2"> progress</h2>
            <div class="progress">
              <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
<h2 class="progress_h2"> progress</h2>
            <div class="progress">
              <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

        </div>
css

Answer №1

To achieve the desired outcome using this setup, you will need to include the nth declarative in the 'progress' class.

Alternatively, you could enclose all the 'progress-bar' classes within the same parent div

<div class='progress'>
  <div class='progress-bar'/>
  <div class='progress-bar'/>
  <div class='progress-bar'/>
  <div class='progress-bar'/>
</div>

Answer №2

.progress .progress-bar: nth-child(odd) { background: green; } Give this a shot $(".progress-bar:nth-child(odd)").css("background","red");

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

The functionality of Image Map is operational in Chrome and FireFox, but encountering issues in Internet Explorer

Hey everyone, I've been struggling with this issue for weeks now. My image map works perfectly in Firefox and Chrome, but for some reason, it's not functioning in Internet Explorer. Could someone please take a look at my code and help me figure o ...

htmlcss

Creating a responsive design that adapts to various image sizes

In my API response, I am receiving images of various sizes. To display these images on my HTML page, I have created a table containing 4 images. To ensure responsiveness, I have set the width of the table to 100%, each row (tr) to 100%, each cell (td) to 2 ...

htmlcss

Refresh your textarea content using the replace method in jQuery

My goal is to extract and manipulate specific values within a user-entered code using jQuery. The code includes custom tags called setting, which I want to extract and display in input fields for easy editing. I have successfully retrieved and displayed th ...

javascriptjqueryhtmlcssxml

On my website, two elements are stacked on top of each other

The CSS framework I am currently utilizing is Materialize Whenever I try to add a new element, it inexplicably appears below the ones above it. I did not specifically instruct it to be positioned underneath or below the cover container. Adding a z-index c ...

htmlcssmaterialize

Center element horizontally at a specified breakpoint and below

Can I use Bootstrap 4 utilities to horizontally center an element like a <select> within a col at a specific breakpoint and below? I want to achieve this without using custom CSS. For instance, I want to center a <select> at xs and sm breakpoi ...

csstwitter-bootstrapbootstrap-4

Addressing Problems with Horizontal Navigation Layout

I am working on creating a horizontal navigation bar that resembles link [1], but it currently looks more like link [2]. How can I adjust my code to achieve the desired look? The wrapper's width is set at 80em and each link should be 155x76px. Wheneve ...

css

Can an <option> element in WebKit be customized by adding an icon to it?

I have integrated a WebView into one of my software applications, and within the HTML page it is rendering, there is a <select> tag. I am interested in enhancing the <option> elements within this select tag by adding icons to them: (The shadow ...

htmlcssmacoswebview

JQuery magic: A shrinking header that changes size as you scroll

There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too muc ...

jqueryhtmlcssheadershrink

Variations in functionality within the Google Chrome browser

This is the content of my HTML document. <BODY> <button id="b1" onclick="load()">Play</button> <canvas id="c1" onclick="f_clicked(this.id,1)"> Your browser does not support the HTML5 canvas tag. </canvas> ...

htmlcss

Unable to properly vertically center multiple divs within a parent div and align their elements vertically within them

I'm diving into the world of HTML/CSS and grappling with various concepts. My goal is to vertically align 2 divs within a larger div, as well as center the contents within those divs. HTML: <html> <head> <link rel="stylesheet" typ ...

htmlcssdivider

Challenges with HTML and CSS drop-down menus

My navigation is giving me a headache. I've been trying to add a dropdown menu, but nothing seems to be working. Here's my current HTML/CSS code. If you have any suggestions on how to fix it, please lend a hand! I've also included a picture ...

htmlcssdrop-down-menuhover

What is the best way to align a span directly below the email input box in this specific design?

I need to position the span element with the ID email-status directly below the email input field, regardless of the viewport size, to alert users when the email is incorrect. MY HTML STRUCTURE: <!DOCTYPE html> <html lang="en"> <head> ...

htmlcssflexbox

Is it possible to maintain child divs in a single line?

Despite trying numerous recommendations (many involving white-space:nowrap and display:inline-block), I have been unsuccessful in keeping these child divs on a single line with horizontal scrolling. This is my code: <div id="list"> < ...

csshtmlparent-child

What is the reason behind opting for ng-style over style in AngularJS for applying CSS formatting?

Recently, I've delved into AngularJS and have been exploring its depths for a few days now. I'm curious about the use of ng-style in styling components within both static and dynamic webpages. Given that we already have the traditional style tag ...

cssangularjsng-style

What is the best way to insert a bullet point in between items?

I am facing an issue with placing a bullet point between list items generated from ng-repeat in Angular. Despite my efforts, the bullet point keeps appearing after the items instead of between them. Here is how it currently looks: Venue1‏• $20 Ho ...

htmlcssangularjs

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 ...

htmlcssangulartypescriptionic-framework

Tips for personalizing the sidebar on your WordPress site and incorporating a collapsible menu feature

Is there a way to customize the sidebar in WordPress so that all the categories and their children are easily accessible? For example, on https://www.w3schools.com, clicking on the header category "HTML" displays all related links in the left sidebar. I&a ...

htmlcsswordpresstagscategories

Issues with Safari text shadow not rendering properly when extending beyond the element border

I've encountered a situation where I have a text shadow applied with the following CSS: body { background: white; } h1 { color: black; text-shadow: 100px 100px 10px black; } https://i.sstatic.net/j8OTS.png When viewing in Safari browser, t ...

csssafari

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

cssreactjsmaterial-uimaterial-designstyling

Modifying the HTML file won't be immediately visible in browsers

I encountered a frustrating issue while working on my website. Despite making changes to the code, the browsers are not reflecting the updates. This problem is occurring in Internet Explorer, Google Chrome, and Firefox. Initially, I had a div with a link ...

htmlcssinternet-explorergoogle-chromefirefox