Overflow from div to full width of screen with alternating background color

Question

I am using the modified snippet below from another thread to create a max-width layout, but I'd like to change .flex-parent:after {yellow} to an alternating background color using pseudo selectors as shown by my attempt in SASS below.

Can I do this when background:yellow is already being targeted by a pseudo selector? Is it possible to target a pseudo selector within a pseudo selector, or am I going down the rabbit hole? I'd prefer to keep things semantic and not try adding extra divs.

HTML

<section class="container">
    <article class="flex-parent">
        <p>This is text in flex-parent (odd)</p>
    </article>

    <article class="flex-parent">
        <p>This is text in flex-parent (even)</p>
    </article>

    <article class="flex-parent">
        <p>This is text in flex-parent (odd)</p>
    </article>
</section>

SASS

.container{
    max-width:1000px;
    margin:0 auto;
}

.flex-parent{
    border:1px solid blue;
    position:relative;

&:after{
    content:"";
    position:absolute;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    z-index:-1;
    background:yellow;

        &>:nth-of-type(odd){
        background-color:orange ;
        }

        &>:nth-of-type(even){
        background-color:red;
        }
    }
}

score 1 · Accepted Answer · answered Oct 20 '16 at 19:50

From the docs

The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

As it is a virtual child you can't select any further, but combining selectors is allowed, so what you can do is :nth-of-type(odd)::after.

I've created a fiddle to show what I mean, but you could do like this:

CSS:

.container{
    max-width:1000px;
    margin:0 auto;
}

.flex-parent{
    border:1px solid blue;
    position:relative;

  &:after {
    content:"";
    position:absolute;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    z-index:-1;
    background:yellow;
  }

  &:nth-of-type(odd)::after{
    background-color:orange ;
  }

  &:nth-of-type(even)::after{
    background-color:red;
  } 
}

I'm marking this as the correct answer, for the only reason that it's easiest to read! — Wren, Oct 20 '16 at 23:30
Interesting development: I needed to add `z-index:1` to `.flex-parent` in my own project to actually be able to see the text. Not sure why, but an easy solve! — Wren, Nov 11 '16 at 09:20

Thielicious · Answer 2 · 2016-10-20T20:34:44.303

0

And also, if you want to make it more semantic, try like this:

  &:nth- {
    &of-type {
      &(odd)::after { background:orange; }
      &(even)::after { background:red; }
    }
    &child { // some other
      &(4)::after { background: pink; }
      &(5)::after { background: green; }
    }
  }

https://jsfiddle.net/Dezain/1oy01zt7/2/

edited Oct 20 '16 at 20:34

answered Oct 20 '16 at 20:13

Thielicious

4,122
2
25
35

1

Thanks for this @TheDefinitionist! That is some lean code right there :) – Wren Oct 20 '16 at 23:16
So to confirm, you would not use `>` to select a direct child of a pseudo element (like how I had written it), but `::` to combine them? – Wren Oct 20 '16 at 23:23
The `>` is up to you I don't know what your future plan is, you can use it if you want to point on direct childs but if you have many other childs in 2 or more levels deeper then I wouldn' use it at all, I would just give them a class to create a pointer and `::` only for pseudos like this or `::before`. – Thielicious Oct 21 '16 at 08:05

Overflow from div to full width of screen with alternating background color

2 Answers2