jquery - styling the shadow dom :after using next sibling in css? -

ok take this:

<div class="foo">     <p>lorem        :after     </p> </div> 

this can styled so:

 .foo p:after{    content: 'ipsum';    display: block;   } 

now have dynamically added form p using javascript so:

<div class="foo">     <p>lorem         <form action="post">             <input type="text" />             <button>send</button>         </form>        :after     </p> </div> 

but can't style form using adjacent pseudo selector so:

 .foo p >form + *:after{    content: 'ipsum';    display: block;   } 

why not? , how style :after if it's next form? chris

you're trying style ::after pseudo-elements of elements direct siblings form element, direct child of p element child of .foo. other conditions match, there no direct sibling form element in structure.

in order style p::after in case there form elements children, you'd need have parent selector, practically doesn't exist. according spec rule like:

!form > p::after { ... }