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

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

Answer 2

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/

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

2 个答案: