Select elements without specify class in container and last among them - css

Question

HTML:
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject">Subject length must be at least 3</span>
</div>
Generated by Angular HTML
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine" class="ng-hide">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject" class="ng-hide">Subject length must be at least 3</span>
</div>
CSS:
.validation-summary-errors > span:not(.ng-hide):last-child {
display: block;
margin-bottom: 20px;
}
Problem:
This CSS select span which no have ng-hide class AND is last child at the same time.
Need:
Select span which no have ng-hide class and last child among them, i.e. only second span.
Only CSS please or another way show some block errors with padding if errors is exists.

Answer 1

As mentioned in comments, that's pretty tough to pull off with just CSS. As an alternative to what you are trying to do, you could attempt to come at it the other way around, by selecting the first element with the class of ng-hide, which is easier because of the way that selectors can only select forwards of elements:
.validation-summary-errors > :not(.ng-hide) + .ng-hide
would select the element immediately after the element you are trying to select now, which means you can sort of flip your styles around.. use margin-top on it instead of margin-bottom on the one previous, etc.
This may not give you exactly what you want, depending on how exactly you are trying to style your elements, but it might work.