Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

first-child and last-child li does not work when elements are hidden #266

Closed
aesculus opened this Issue Jul 18, 2011 · 6 comments

Comments

Projects
None yet
3 participants

When you apply display-none to a rounded li then the first-child, last-child css rules won't work for rounded lists. This is true in the jqt theme whenever I toggle display-none on/off in a li.

Member

davidkaneda commented Dec 17, 2011

You'll have to work out a custom solution in that case, perhaps adding a class to what you know are the first and last. Another potential option: Replace the rules in the CSS with :first-child:not('.hidden') (or whatever you're using to hide the lis)

fletom commented Feb 22, 2012

Using :first-child:not(.hidden) won't work, by the way, because that will just select nothing at all if the first child is hidden.

Member

davidkaneda commented Feb 22, 2012

Have you tried :visible:first-child ?

On Feb 21, 2012, at 5:30 PM, Fletcher Tomalty reply@reply.github.com wrote:

Using :first-child:not(.hidden) won't work, by the way, because that will just select nothing at all if the first child is hidden.


Reply to this email directly or view it on GitHub:
#266 (comment)

fletom commented Feb 22, 2012

You don't seem to understand how :first-child works. It will only select the very first child of the parent element, :visibile, .hidden or otherwise.

Appending selectors in CSS means a logical AND, so what you last suggested will select an element only if it is both the very first child of the parent element AND if that element is visible. Otherwise, it selects nothing, not the first visible element.

Also, :visible is only a jQuery selector, and doesn't exist in CSS AFAIK.

Member

davidkaneda commented Feb 22, 2012

Very true — there's also first-of-type I believe. Sorry, I'm rushing, but can deep dive within the next couple days-

Thanks,
Dave

On Feb 22, 2012, at 11:45 AM, Fletcher Tomalty wrote:

You don't seem to understand how :first-child works. It will only select the very first child of the parent element, :visibile, .hidden or otherwise.

Appending selectors in CSS means a logical AND, so what you last suggested will select an element only if it is both the very first child of the parent element AND if that element is visible. Otherwise, it selects nothing, not the first visible element.

Also, :visible is only a jQuery selector, and doesn't exist in CSS AFAIK.


Reply to this email directly or view it on GitHub:
#266 (comment)

fletom commented Feb 22, 2012

Haha, I know I'm probably being annoying, but that won't work either: :first-of-type will do basically the same thing, except that it will only select the first element of each "type", which is the tag name itself, not an arbitrary selector. So it'll select the first p tag and the first div tag both, but that doesn't help us at all.

There's no need to "deep dive" as you said; there's no easy fix for this one. What you suggested about keeping manual track of what's first and what's last in JavaScript is the best option.

I was just commenting because that :first-child:not('.hidden') thing is a common misconception about how :first-child works, and the less wrong we all are the better! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment