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;

        }

    }

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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;
  } 
}

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

Sign up