Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can I refer to an item in an other parents?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #248061
    Ayala
    Participant

    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?

    #248063
    Shikkediel
    Participant

    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

    #248066
    Ayala
    Participant

    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..

    #248067
    Ayala
    Participant

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

    #248068
    Shikkediel
    Participant

    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…

    #248090
    Ayala
    Participant

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

    Is there an other solution?

    #248098
    Shikkediel
    Participant

    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

    #248099
    Ayala
    Participant

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

    #248100
    Shikkediel
    Participant

    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

    #248102
    Ayala
    Participant

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

    #248103
    Shikkediel
    Participant

    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.

    #248118
    Ayala
    Participant

    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?

    #248119
    Shikkediel
    Participant

    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).

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.