-1

I'm not sure why this isn't working. I'm trying to change the :after rule for the :last-child element, but it's ignoring :last-child:after.

HTML:

<section id="timeline">
    <article></article>
    <article></article>
    <article></article>
</section>

CSS:

#timeline article:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 1px;
    background: #222;
    z-index:1;
}

#timeline article:last-child:after {background:none!important}

Demo: https://jsfiddle.net/cd8g2hs0/4/

I've found other questions about this issue, and it seems like I'm doing it correctly. But obviously I'm not!

LBF
  • 1,133
  • 2
  • 14
  • 39
  • Maybe this helps? http://stackoverflow.com/questions/2351623/combining-css-pseudo-elements-after-the-last-child – AtheistP3ace Oct 09 '15 at 20:26
  • I had already looked at that question, but it suggests what I'm already doing. Am I missing something? – LBF Oct 09 '15 at 20:27
  • It _is_ working – you’re just not seeing any effect, because _all_ your :after pseudo elements are as high as the whole .timeline element. – CBroe Oct 09 '15 at 20:28
  • http://stackoverflow.com/questions/2351623/combining-css-pseudo-elements-after-the-last-child as well – Lizardx Oct 09 '15 at 20:29
  • Check this one - http://stackoverflow.com/questions/2351623/combining-css-pseudo-elements-after-the-last-child – Swathi Oct 09 '15 at 20:33
  • You'll also want to close your image tags />, and possibly using :: for modern browsers as well as single : colons – Benneb10 Oct 09 '15 at 20:36

1 Answers1

5

I think your code is working - it's just not producing the result you expect.

Try changing the first line of your CSS in the fiddle to the following:

#timeline article {padding:0;position:relative}

Does this get your desired result?

bashaus
  • 1,614
  • 1
  • 17
  • 33
  • 1
    D'oh! I can't believe I forgot the "position:relative" -- that was it. Once I added that, it worked just fine. Thanks. I'll mark correct once I can. – LBF Oct 09 '15 at 20:30