15

Edit 2

Now, after the bug fix, this code run properly


This code doesn't run properly

body {
    counter-reset: para;
}
p {
  position: relative;
  padding-left: 25px;
}
p:before {
  position: absolute;
  left: 0px;
  counter-increment: para;
  content: ' ';
}
p:nth-child(5n+1):before {
  content: counter(para);
}
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>

It should look like this

enter image description here


Edit

I just figured out it does that because of the script tag <script src="http://stacksnippets.net/scripts/snippet-javascript-console.min.js"></script> is injected before any other element.

If I don't check "include console" when edit my snippet it works, so how should I both enable "console" and show a valid CSS rule?

3 Answers 3

4

Thanks for reporting this bug. It runs properly now! (Hard refresh for caching might be required). I have modified Stack Snippets to include the console in the <head> tag which alleviates DOM assumptions.

1
  • I just tested using :last-child and :nth-last-child, which stopped working after the update, now caused by the elements dynamically added at the body's end. I realize this might not be able to be avoided and since they are used less often (based on my own usage), the now setup is preffered. Still, is it possible to flash a warning/notification when they are present, or in some other informative way, let users know about the effect it creates?
    – Asons
    Commented May 23, 2016 at 19:43
22

Yes, placing the console snippets at the top is so problematic.

The easy fix would be moving it to the bottom, just like the script element with the JS code entered by the user. That won't be perfect neither, but much probably less problematic.

I already proposed the change. Consider upvoting that post if you agree.

Meanwhile, you can

  • Disable the console

    enter image description here

    body {
      counter-reset: para;
    }
    p {
      position: relative;
      padding-left: 25px;
    }
    p:before {
      position: absolute;
      left: 0px;
      counter-increment: para;
      content: ' ';
    }
    p:nth-child(5n+1):before {
      content: counter(para);
    }
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>

  • Use :nth-of-type instead of :nth-child

    body {
      counter-reset: para;
    }
    p {
      position: relative;
      padding-left: 25px;
    }
    p:before {
      position: absolute;
      left: 0px;
      counter-increment: para;
      content: ' ';
    }
    p:nth-of-type(5n+1):before {
      content: counter(para);
    }
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>

8
  • Very good - gave this post and your linked proposal an upvote
    – Asons
    Commented May 22, 2016 at 18:48
  • 1
    @rene Stack snippets created before the console was introduced don't have the console.
    – Oriol
    Commented May 22, 2016 at 18:50
  • 1
    Exactly, so making the change ASAP will likely have no side effects
    – Asons
    Commented May 22, 2016 at 18:52
  • @LGSon The problem is that if the change is not done ASAP, some snippets could be created relying on the console element being there. When that is fixed, these snippets will break. So I would prefer if this was fixed ASAP. And maybe don't include the console by default.
    – Oriol
    Commented May 22, 2016 at 18:53
  • Agree completely with that!
    – Asons
    Commented May 22, 2016 at 18:54
  • @rene Problem is big enough making it not possible to show a solution using the CSS rule nth-child, which is quite common actually.
    – Asons
    Commented May 22, 2016 at 18:57
  • Oriol, can you confirm, on your end, it works as expected now after the update/fix? ... Mine does.
    – Asons
    Commented May 23, 2016 at 19:13
  • @LGSon Yes, now the console elements are loaded inside a DOMContentLoaded event listener, so they are inserted at the end of the body.
    – Oriol
    Commented May 23, 2016 at 19:20
4

Since the tag <script src="http://stacksnippets.net/scripts/snippet-javascript-console.min.js"></script> is injected before any other elements in the body it would be equal adding it in the head instead.

Doing so would solve the CSS rule issue.

1
  • 3
    The script can't be added directly to the head because it appends some elements to the body. But it could be modified to use an event listener which waits until the body has been parsed.
    – Oriol
    Commented May 22, 2016 at 18:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .