This may seem like a spin off but the original question never got an answer and i hope i never loose points for this. So i'm using parsleyjs for my validation, awesome validation by the way but i don't like the way errors are displayed by default.
Usually, it creates a ul tag with a couple li's and the passes the error message into them, this is fine but the problem is that I'm unable to style this li tags. I've tried everything. The list looks like this.
<ul class="parsley-errors-list filled" id="parsley-id-5">
<li class="parsley-required">Please choose a username</li>
</ul>
In my css i've tried .parsley-error and many other creative ways to style this element but none works. I think it may also be due to the fact that those elements are added to the dom after load time. If anyone has tackled this before, i'd appreciate your help. Thanks in advance.
You should be able to target those lis with any number of selectors, regardless of when they're added to the page -
.parsley-errors-list li
.parsley-required
.parsley-errors-list .parsley-required
to name a few. If none of those work, it's probably a specificity issue - inspecting the rendered styles in your browser's dev tools may help you out here.