Encountering a challenge with the CSS :nth-child pseudo selector and suspecting that something crucial has been overlooked.
index.html
<html>
<head>...</head>
<body>
<div class='selector'>first</div>
<div class='selector'>second</div>
<div class='selector'>third</div>
<div class='selector'>fourth</div>
<div class='selector'>fifth</div>
</body>
</html>
style_does_not_work.css (does not work)
.selector { background-color: #ffffff; }
.selector:nth-child(1) { background-color: #f00000; }
.selector:nth-child(2) { background-color: #ff0000; }
.selector:nth-child(3) { background-color: #fff000; }
.selector:nth-child(4) { background-color: #ffff00; }
.selector:nth-child(5) { background-color: #fffff0; }
style_that_works.css (for the proof of the selector concept)
.selector { background-color: #ffffff; }
.selector:nth-child(even) { background-color: #f00000; }
.selector:nth-child(odd) { background-color: #ff0000; }
A sense of confusion arises from the disparity between the failure of :nth-child(2) and the success of :nth-child(even). Is there a specific factor causing this discrepancy?
The primary objective is to assign fixed positioned elements a variable offset from the top during dynamic injection and removal via JavaScript.
Update / Additional
Regrettably, an error can be identified in the example above. Despite resolving this issue, the underlying problem persists - even after observing functional JS-Fiddles (a source of considerable bewilderment).
Furthermore, screenshots illustrating the current dilemma have been shared:
CSS:
.notification-area {
position: fixed;
z-index: 999;
width: 500px;
height: 100%;
overflow: hidden;
}
.notification-area.top-right {
top: 25px;
right: 25px;
left: auto;
-webkit-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-moz-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-ms-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-o-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
}
/* these lines are completely ignored */
.notification-area:nth-child(2) { margin: 125px 0px 0px 0px; }
.notification-area:nth-child(3) { margin: 250px 0px 0px 0px; }
.notification-area:nth-child(4) { margin: 375px 0px 0px 0px; }
.notification-area:nth-child(5) { margin: 500px 0px 0px 0px; }
/* this line grabs instead - I don't want to use "even", but it shows me, that the selector :nth-child() should be fine... */
.notification-area:nth-child(even) { margin: 125px 0px 0px 0px; }