25

For those who know CSS there is a selector :last-child that allows you select the last element node and style it.

There is a little bug with the snippet that can be tricky when you try to do a basic example using this selector. If you try this:

div {
  height:100px;
  background:red;
  margin:10px;
}
div:last-child {
  background:yellow;
}
<div></div>
<div></div>

It's supposed to work and make the last div yellow, but if you inspect the element you can see the script tag is inserted before the </body> tag close making the last-child selector useless.

I know this can be solved using another extra container like this:

div {
  height:100px;
  background:red;
  margin:10px;
}
header div:last-child {
  background:yellow;
}
<header>
  <div></div>
  <div></div>
</header>

But it can be frustrating for another user that try to use it and just don't work.

3
  • 14
    This is one of the biggest reasons I can't bring myself to use Stack Snippets on a regular basis yet.
    – BoltClock Mod
    Commented Feb 4, 2015 at 16:52
  • 3
    @BoltClock, but JSFiddle is ok even though it has the same issue?
    – zzzzBov
    Commented Feb 5, 2015 at 15:36
  • 9
    @zzzzBov: Yes because that's not the default. This behavior is default in Stack Snippets and cannot be changed by the user.
    – BoltClock Mod
    Commented Feb 5, 2015 at 15:37

2 Answers 2

3

The bug could be fixed if the stack snippet added an additional script at the end of body, which would remove itself and user's script:

<script>
for(var i=0; i<2; ++i)
    document.body.removeChild(document.body.lastElementChild);
</script>

If the scripts are injected without whitespaces, an alternative would be lastChild (instead of lastElementChild), which has more browser support.
Or maybe document.getElementsByTagName('script').

Advantages:

  • Even if the script elements are removed, the scripts have already run, so that shouldn't affect them.
  • Even if user's script throws an error, the additional script will still run and remove both injected scripts.
  • Even if the additional script throws an error and can't remove the injected scripts, it wouldn't be much worse than current situation (just 2 injected scripts instead of 1).

Disadvantages: the additional script could interfere with user's script in some cases

  • If user's script added a beforescriptexecute event listener.
  • If user script doesn't expect that the number of elements in body will change.
  • ...?

Currently, to emulate that fix, you can add the following in your script:

document.body.removeChild(document.body.lastElementChild);

document.body.removeChild(document.body.lastElementChild);
div {
  height:100px;
  background:red;
  margin:10px;
}
div:last-child {
  background:yellow;
}
<div></div>
<div></div>

However, don't use this emulation. In case Stack Snippets change (e.g. they implement the fix), you would be removing some element you don't want to remove.

1
  • Not sure if fixing that CSS issue is worth the possible interference with user's script. Probably not. But just an idea.
    – Oriol
    Commented Feb 4, 2015 at 20:38
7

Some additional info: due to limitations imposed by HTML, script elements inserted at the end of the page cannot appear any later than as the last children of the body element. The only ways this could be addressed are, for the user,

  • using div:last-of-type instead of *:last-child (note the explicit type selector), or
  • adding 1 to every "last child" selector count, so :nth-last-child(2) instead of :last-child, :nth-last-child(odd) instead of :nth-last-child(even) and so on

and for the developer,

  • putting scripts in the head and not the body, or
  • automatically wrapping the content in the HTML code block in their own container element so users don't have to create one every time.

The big caveat of that last method is that it will mess up any code that depends on these elements being top-level descendants of the body element, although I'm not sure how much of an edge case that would be compared to the :last-child problem described here.

5
  • While it is invalid (and i fully understand we want to avoid any bugs that relying on invalid markup may cause), <script> elements may be appended to the <html> element, which will avoid this issue and any others relating to the structure of markup.
    – zzzzBov
    Commented Feb 5, 2015 at 15:30
  • @zzzzBov: Huh, so that works. I wrote my original answer under the impression that the browser would basically force script elements to the end of body even if you tried to append them to html. But apparently document.documentElement.appendChild(document.createElement('script')); works...
    – BoltClock Mod
    Commented Feb 5, 2015 at 15:35
  • Yea, I've noticed that the AdBlock plugins tend to dump stylesheets and scripts in between head and body so that they don't interfere with the rest of the page (any more than they already do).
    – zzzzBov
    Commented Feb 5, 2015 at 15:38
  • Sticking the scripts inside the <head> isn't a bad idea. You just have to be sure that your script start when the whole page finishes loading (e.g.: $(function(){ [...] }); for jQuery, window.onload=function(){} for plain JS). I don't get why you might need script inside a frame to display results... But that isn't the point. Commented Feb 6, 2015 at 9:58
  • Thanks for the feedback I would prefer a solution that doesn't involve the user to make changes, I would go with the developer one.
    – DaniP
    Commented Feb 6, 2015 at 16:30

You must log in to answer this question.

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