Wren Wren - 1 month ago 4
CSS Question

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

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

Answer

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