Creating a proper nth-child CSS for multi-level HTML elements involves understanding the structure of the elements

My current project involves a screen where widgets can be dynamically inserted into the DOM. I am looking to adjust the z-index based on the number of times the class decrement-z-index appears.

This is the CSS code I have written in an attempt to achieve this:

.tblrow > .tblcell > div >  .decrement-z-index:nth-child(1) {
        z-index: 200 !important;
}
.tblrow > .tblcell > div >  .decrement-z-index:nth-child(2) {
        z-index: 199 !important;
}
.tblrow > .tblcell > div >  .decrement-z-index:nth-child(3) {
        z-index: 198 !important;
}
.tblrow > .tblcell > div >  .decrement-z-index:nth-child(4) {
        z-index: 198 !important;
}

You can view my jsFiddle demo here: http://jsfiddle.net/r6axhgy2/

Upon inspecting elements with the class decrement-z-index, they all seem to indicate as the second occurrence.

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

I would appreciate guidance on properly implementing nth-child so that it accurately selects the desired child element.

htmlcss

Answer №1

Your current usage of the nth-child selector may need adjustment. Consider utilizing the following code snippet for a potential solution:

.tbl .tblrow:nth-child(1) .decrement-z-index {
    z-index: 200 !important;
}
.tbl .tblrow:nth-child(2) .decrement-z-index {
    z-index: 199 !important;
}
.tbl .tblrow:nth-child(3) .decrement-z-index {
    z-index: 198 !important;
}
.tbl .tblrow:nth-child(4) .decrement-z-index {
    z-index: 197 !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

Having trouble with JQuery's .prop function not unchecking a checkbox?

I have been experimenting with different solutions in order to uncheck a checkbox when another checkbox is checked. Unfortunately, none of the methods I've tried seem to be working effectively... Currently, my code looks like this: $("#chkBox1").cli ...

javascriptjqueryhtmljquery-mobilecheckbox

Text placed over a video player

I have created a full-screen div with a video playing in the background and I need to overlay some HTML on top of it. However, when I add the HTML elements, they briefly appear and then disappear once the video starts playing. What could be causing this i ...

htmlbootstrap-4html5-video

What is the best way to center the 'email promo' text in the top navigation bar alongside the image and other text links?

Struggling with learning CSS and HTML, particularly when it comes to positioning elements on the page. I'm having trouble vertically aligning the elements inside the top nav bar and can't seem to figure out what I'm doing wrong. Any insights ...

htmlcss

Utilizing the Bootstrap grid system allows for input fields to automatically expand to 100% width once they reach

I am encountering some challenges while attempting to develop a responsive form using bootstrap grids. The issue seems to arise when resizing the browser window, as the grid classes behave unexpectedly by expanding and taking up the entire page width at ce ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Why is my CSS and Bootstrap full-page image not displaying properly?

I've been struggling to get a full-page image to display on my website and resize responsively across different screens. I've searched through w3schools and Stack Overflow for solutions, but no matter what I try, it just doesn't seem to work ...

htmlcssreactjsimage

Replace the hyperlink with plain text using JQuery

Is there a way to replace a hyperlink within an li element with different text but without removing the entire list item? <li class="pull-left"> <a href="#" class="js-close-post" data-post-id="1"> Close </a> </li> ...

javascriptjqueryhtml

Avoiding memory leaks and performance hiccups in canvas applications

Currently, I am utilizing a canvas to present a grid made up of interconnected dots (a common feature in many codepens and experiments), and everything functions smoothly. In order to make the canvas responsive, I encapsulated all my code generation within ...

jqueryhtmlcanvasmemory-leaks

Using jQuery to Drag: Creating a draggable effect on a div element

I recently posted a question, but I feel like I need to rephrase it to make it more general. Basically, I have an element that can be moved around and resized using jQuery. I used CSS to attach another div to the right of this element. Initially, when you ...

jqueryhtmlcssdrag

Adjust the appearance of elements depending on whether the user has activated dark mode or

What is the most efficient way to implement both dark and light themes in my Vue app? One option is to create a 'dark.scss' file and use the '!important' property to override styles defined in components. Another option is to utilize pr ...

javascriptcssvue.jsthemes

Guide on creating a logarithmic-based bar rating system

I am working on creating a bar rating system for my website, but the current design doesn't look great. I want the height of the bars to increase like an exponential curve gradually, starting off not too steep and gradually increasing afterward. Here ...

jquerycssratingvotingvoting-system

Uncertain about the ins and outs of AJAX

I am a complete beginner in web development. Although I have studied JavaScript and HTML through books, my understanding is still limited. I have never worked with AJAX before and find most online examples too complex for me to follow. My goal is to crea ...

javascriptjqueryajaxhtml

Is there a way to make text fade in and out smoothly instead of abruptly disappearing and reappearing after an animation ends?

I'm seeking a unique animation effect for my right-to-left scrolling text. Instead of the text teleporting back to its origin at the end of the animation, I would like it to smoothly disappear and reappear from the margins. .custom-animation { he ...

htmlcsscss-animations

The Ajax/jQuery output is not showing up in the iframe, but is instead appearing on a separate page

I've scoured various forums and websites, attempting to troubleshoot the issue described below without success. This problem persists in both IE 11 and Firefox 10.0.2. My goal is to submit a form (POST) to a website () and showcase the resulting bri ...

javascriptjqueryhtmlajaxiframe

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4

There is an issue with my HTML due to a MIME type error

I am currently facing an issue with my project. I have developed a node js server and now I want to display an HTML file that includes a Vue script loading data using another method written in a separate JS file. However, when I attempt to load the HTML f ...

javascripthtmlnode.jsvue.js

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss

Show user information from a MySQL database in a dynamically generated table using PHP

I am working on developing an absence tracking system using PHP and MySQL. Each absence is categorized by a specific leave type, such as sick or emergency. The goal is to present this information in an HTML table format where the names of users are display ...

phphtmlmysql

Within jQuery lies the power to perform multiplication operations effortlessly

I'd like to accomplish this using jQuery: var menuItems = document.getElementsByTagName("li"); for (var k = 0; k < menuItems.length; k++) { if (menuItems[k].className == "menu") { var child = menuItems[k].firstChild; if ...

javascriptjqueryhtml

Modifying button appearance based on state change in AngularJS

I have a button with a grey color and I want to create two different states for it: one that is selected (blue) and another that is in an idle state (grey). Currently, I am working on Angularjs but I am fairly new to this platform. Could you kindly provid ...

javascripthtmlcssangularjs

Resizing an image within a div with automatic adjustment, centered and aligned to the bottom position

I'm really struggling to understand this concept and not making much progress. I have a background image that automatically scales to fit the window size. In front of it, I want to center an image fixed to the bottom of the page, while still being sca ...

csshtmlpositionmarginautoscaling