Nesting Pseudo-Elements Inside Pseudo-Elements

Nesting pseudo-elements inside pseudo-elements

The idea of nesting ::before and ::after pseudo-elements has been proposed; see this section of the Generated and Replaced Content module. However, that module has been abandoned pending a complete rewrite, so I wouldn't hold my breath on this document ever receiving implementation until it's republished. And even then, whether nesting content pseudo-elements will still be a thing is as yet unknown.

Can I nest the pseudo-element after?

True, that module was proposed, but unfortunately not implemented by any browser.

So for now you can't do this.

Edit: Just found this post

Is it possible to include the pseudo element inside it's parent element css

Not with vanilla css.

You have a few options, such as Scss, Less, Stylus and Postcss(with a plugin).

If you're just starting, I'd recommend Scss:

.element {
  &::after {
  }
}

how to nest pseudo element inside another psedo element in scss

You coould try it like this:

Use &:hover:after {} for targeting the after pseudo-element of the element being hovered over.

&:after:hover {} would select the after pseudo-element and used on hover it.

Nested pseudo elements ::before & ::after not working with @keyframes animation

I got it! The background image for the header section was conflicting with the ::before and ::after, so I just need to add a higher z-index to the heading and it works!

.header-block-heading-primary {
  position: relative;
  z-index: 20;

  &::before {
    position: absolute;
    left: 0;
    top: 0;

    height: 100%;
    width: 100%;

    content: "Web Developer";
    z-index: -1;
  }

  &::after {
    content: "Web Developer";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  &::before {
    color: #ff00c1;
    animation: glitch-effect 3s infinite;
  }

  &::after {
    color: #3498db;
    animation: glitch-effect 2s infinite;
  }

  &:hover::before {
    animation: glitch-effect 1s infinite;
  }

  &:hover::after {
    animation: glitch-effect 2s infinite;
  }
}

Is it possible to have a pseudo element within pseudo element?

Is my syntax wrong or is pseudo-element within pseudo-element not supported?

If I understand you correctly, it isn't possible. You can't chain multiple pseudo-elements as of Selectors Level 3 though it apparently may be allowed in the future.

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.

---

Interestingly, you can chain the ::first-letter & ::before / ::after pseudo-elements with the placeholder pseudo element, e.g.

::-webkit-input-placeholder::first-letter {
color: purple;  
}

http://jsfiddle.net/k3yb6/1/

Can the CSS :part pseudo-selector be used to style nested web components?

Nope. It is not possible. It kind a breaks the encapsulation principle. The right way is to use proper theming. That means using a combination of:

::part - For direct theming of the component
:host-context - for theming based on the context
::slotted - For styling the slotted element inside the styling

For more dynamic theming, you can use above styles in combination with Element.matches API. Whatever the class/context that the user of the component has set, you can then change the styling of nested children component.

On a side note, modifying the styling of a decadent component (children of children) is a bad practice even when not using Shadow DOM or Web Components. It will result in a brittle non-maintainable CSS.

Edit Note:

:host-context is not implemented in all browsers and probably never will.

Nested pseudo selectors with Sass

If you don't understand the rules of the selectors, where did you get the CSS from? Just curious.

a.) The rule is saying, for the 2nd and 3rd .modal-content, apply a left margin of 10px on the .feature-icon if one is there.

b.) When nested, those selectors will ONLY work in those instances. If you have another .feature-icon in say something with a class of .yellowBox, instead of .modal-content, it will not get the left margin. Nesting allows for quicker styling and gives your styles structure, but makes your selectors VERY specific the further in the nesting goes.

EDIT:
After further review, there will only be one .modal-content, you probably want this:

.modal-content {
    .feature-bullet {
         &:nth-child(2), &:nth-child(3){
           .feature-icon{
              margin-left: 10px;
      }
    }
  }
}

The way you have your SASS right now, it says look for the 2nd and 3rd .modal-content, but there will only be one for the modal. Instead, you want to look for the 2nd and 3rd .feature-bullet, and apply the margin to the .feature-icon within those.

---

Related Topics