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}
background:yellow
<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>
.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;
}
}
}
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;
}
}