Select elements without specify class in container and last among them

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 &amp;&amp; !Mail.To.$pristine" class="">To field is required</span>
    <span ng-show="Mail.To.$error.required &amp;&amp; !Mail.To.$pristine" class="">To field is required 2</span>
    <span ng-show="Mail.Subject.$error.required &amp;&amp; !Mail.Subject.$pristine" class="ng-hide">Subject field is required</span>
    <span ng-show="Mail.Subject.$error.minlength &amp;&amp; !Mail.Subject.$pristine &amp;&amp; !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.

How are you going to determine which error message gets shown? Why can't you add a class to the element that contains the error message you want to display? Surely that's possible and more intuitive than what you are trying to do. — hungerstar, May 13 '16 at 14:45
@hungerstar, its doing angularjs through ng-show=boolExpression directive. Propose your solution doing it better. — uda, May 13 '16 at 15:24
@uda I'm not all the familiar with Angular but I'm sure there's a way to add a class based on some values. I'm sure there's an `if/else` syntax or similar that you can use. Just did a quick search on SO and found [this post](http://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class). — hungerstar, May 13 '16 at 15:29

score 0 · Answer 1 · answered May 13 '16 at 14:45

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.

Select elements without specify class in container and last among them

1 Answers1