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.