0

Here is the Pen:

https://codepen.io/Blue_5/pen/pLKzmX?editors=0100

The CSS:

.colors {
      position: absolute;
      top: 25px;
      height: 25px;
      width: 25px;
      border-radius: 100%;
    }
    .colors:nth-child(2) {
      /* The first Child */
      left: 65px;
      background: rgba(255, 128, 0, 1);
    }
    .colors:nth-child(3) {
      left: 105px;
      background: rgba(255, 255, 0, 1);
    }
    .colors:nth-child(4) {
      left: 145px;
      background: rgba(0, 160, 0, 1);
    }
    .colors:nth-child(5) {
      left: 185px;
      background: rgba(64, 200, 255, 1);
    }
    .colors:nth-child(6) {
      left: 225px;
      background: rgba(0, 128, 200, 1);
    }
    .colors:nth-child(7) {
      left: 265px;
      background: rgba(0, 0, 0, 1);
    }
    .colors:nth-child(1) {
      left: 305px;
      background: rgba(255, 0, 0, 1);
    }
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>

The HTML:

<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>

I am trying to select first child element using nth-child(1) on Code snippet, here it works fine. But, the same doesn't work on CodePen. It is weird!

Please help me!

Cœur
  • 37,241
  • 25
  • 195
  • 267
  • 5
    it's not weird .. codepen and similar tools may add their own element within the body... so wrap everything inside a container to be sure it work ... don't leave things to unknown behavior – Temani Afif Apr 02 '18 at 10:06
  • Thank you! Now my question seems weird xD –  Apr 02 '18 at 10:09
  • 1
    Like what @TemaniAfif said, CodePen injects a `` element at the start of the `` element, which messes up your `nth-child` selectors. You can always inspect the DOM using dev tools of your browser to see what went wrong. – Terry Apr 02 '18 at 10:09
  • instead of `nth-child` use `nth-of-type`, that will target the correct elements in your code pen. – Suresh Ponnukalai Apr 02 '18 at 10:13
  • 1
    @SureshPonnukalai i don't agree, nth-of-type can fail also as you don't know the element that can be added, codepen may also add a div ... so the best way to be sure ot will work at 100% is to use our own wrapper unless it will be random – Temani Afif Apr 02 '18 at 10:16
  • @Suresh I have tried that earlier, and it hadn't worked. Anyways, now my problem is solved and thanks for your comment! –  Apr 02 '18 at 10:16
  • @TemaniAfif If he used `div.colors:nth-of-type(1)` then definitely it will work. Check this fiddle https://jsfiddle.net/r4L6rw5t/13/ – Suresh Ponnukalai Apr 02 '18 at 10:22
  • @SureshPonnukalai you didn't understand me :) i know it will work ... i meant that it's random ... what if the fiddle add a `div` at the start ? it won't work, and you don't know this ? ... so it will work now and today, but you cannot be sure it will work at 100% all the time. – Temani Afif Apr 02 '18 at 10:24
  • @SureshPonnukalai i added a div at the start and no it's no more working --> https://jsfiddle.net/r4L6rw5t/15/ – Temani Afif Apr 02 '18 at 10:26
  • @Suresh That's what I had mentioned in my second-last line! –  Apr 02 '18 at 10:26
  • @TemaniAfif ohh yaa...now i understood. thanks for pointing it out. – Suresh Ponnukalai Apr 02 '18 at 10:27

0 Answers0