CODEWITHSUNDEEP
htmlcsscss-selectors
CruorVult
CruorVult

Reputation: 823

How to add style for last visible element without JS

This selector doesn't work. Is it really possible?

See this http://jsfiddle.net/Hd7VZ/

.x-form-fieldset:last-child:not(x-item-hidden) {
    border-bottom: 0;
}

One of solution is this http://jsfiddle.net/8Fpyu/

Upvotes: 1

Views: 1320

Answers (2)

robertc
robertc

Reputation: 75717

The comment by antejan is correct, currently you're selecting the .x-form-fieldset which is :last-child in its block. If you want to select the :last-child within .x-form-fieldset then this is the correct syntax:

.x-form-fieldset :last-child {
    border-bottom: 0;
}

However even if the last item is hidden it is still :last-child, so adding the :not will achieve nothing in your example.

There is nothing in CSS at present which allows you to ignore non-visible elements, as you can see from this small modification of your example simple effects like alternate striping are also broken by hiding elements. This may be a worthwhile addition to a future version of CSS, you could try suggesting it to the W3C CSS Working Group and seeing if they think it'd be worth adding to a future version of the selectors spec (CSS Selectors Level 4 is going through the standards process right now, but ideas are being accepted for CSS5 Selectors).

In the meantime, you're stuck with either finding an alternative markup approach, or hacking it in JavaScript.

Upvotes: 3

Fee
Fee

Reputation: 243

It looks like you have a syntax error, add a '.' if it's a class or '#' if it's an id before x-item-hidden.
.x-form-fieldset:last-child:not(.x-item-hidden) | .x-form-fieldset:last-child:not(#x-item-hidden)

Upvotes: 0

Related Questions