Can I refer to an item in an other parents?

[Ayala]

How should I refer to the first image from the first button?

http://codepen.io/Ayalann/pen/YpZpog

I would like that when I hover on the first button I see the first image (z-index: 3;).

I try this:

.buttons:nth-child(1):hover ~ .images:nth-child(1) {
z-index: 3;
}

But maybe if they haven’t the same parent it doesn’t work.

Should I change the html?

[Shikkediel]

Maybe you could add a small fork/demo. ;-)

Although, looking at the title and assuming a continuation of the previous question I’d say it would need a workaround.

codepen.io/anon/pen/woJJvP

[Ayala]

I have one, just I’ve forgotten to share :)
You can check again :)

Yes, I want this. Just I am not sure how could I change the html without changing the design. Because my buttons are in a div, but in this way I can’t do what you do.

I am trying..

[Ayala]

Oh, I can do it without my .buttons class, I see now.
Thank you!

[Shikkediel]

Because my buttons are in a div

No need to try… can’t be done. With CSS it’s not possible go up the element tree, only down.

There was something in the spec that would make such a thing possible (the subject indicator) but they apparently scratched it from the spec.

Piece of cake with JS of course.

Edit – a late reply without seeing the previous one…

[Ayala]

There is one problem with this solution. Opera Mini doesn’t support the transform property.

Is there an other solution?

[Shikkediel]

Opera mini doesn’t really support anything though, I wouldn’t avoid transforms just because of this – pretty much every other browser is fine with it.

But you could always just replace it with a top value and fixed pixels:

codepen.io/anon/pen/zoZgvX

[Ayala]

Thank you, you must be right about Opera Mini. I prefer transform to fixed pixels. Everything is better than fixed pixels :)

[Shikkediel]

I’m wondering if it might actually look correct anyway. Have you checked live or just the support table?

Reading the below link, it sounds like the page is pre-rendered. While transforms might not have any effect while being active on the site, the original screenshot could still show an good representation.

http://stackoverflow.com/a/24808755/3168107

[Ayala]

I didn’t try, I just looked it here: http://caniuse.com/
But maybe it is still working.

[Shikkediel]

I would assume they’re good developers, making a predefined and by now long time supported transform look correctly after the snapshot. But one could always try to check with this:

Download page Opera Mobile Emulator

From what I read, Opera Mini should be included:

Description page

I’ve personally been ignoring that browser so far… hardly ever is the caniuse reference not in the red when I check a particular feature.

Edit – I think the first link is wrong, Mini seems to need another file that’s rather hard to find.

[Ayala]

Thanks for the idea.
I downloaded it, it will be useful in the future as well.
The demo is working.
Is it really the Mini Opera? Not simple Opera?
Is the Mini Opera the mobile version of Opera?

[Shikkediel]

I think there’s two mobile versions of Opera – Mini and regular Mobile. The first one is specialised to restrict bandwidth usage and energy consumption by sending the request through a special server and minimising these footprints. So active animations and what not are disabled on Mini only. The caniuse specs may be a bit misleading because of this.

And then there’s desktop Opera of course…

Some of the links I tried did not lead to the expected download before. I think Opera was taken over not too long ago (by a Chinese consortium).

[Author]

Posts