0

I’m trying to learn a bit more about the CSS3 transitions and “cool stuff”. So I have some nifty animations on my site, and I did some google research that helped me out quite a bit.

I wanted to select an element outside of my hover element. I found out that using the + sign you can target an element that comes after the hover element. A small example (in LESS):

header{
    display: inline-block;
    div#bg_2{
        color:#000;
    }
    div#container{
        float:left;
        &:hover{            
            & + nav {
                ul{
                    opacity: 0;
                }
                li{ 
                    .transition(1200ms, ease-in-out); 
                    margin-left:-100px;
                }
            }
        }

    }
    nav{
        height:30px;
    }
}

So this example allows me to give a transition to the element after the hover element. But my question is, is it possible to do the reverse? To target the element before the hover element? In the example, the bg_2 element.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Peter Boomsma
  • 5,330
  • 5
  • 56
  • 111

2 Answers2

1

The ! subject selector in the CSS Selectors 4 draft specification would be a way to select a previous element. It proposes that instead of writing .one + .two { … } to style .two, you could write !.one + .two { … } to style .one.

However, ! is currently not implemented in any browser. And the CSS Selectors 4 specification can still change, because it is a draft. Also, the spec currently marks the ! subject selector as being in the “complete” profile, which is meant to be used by JavaScript, but not in the “fast” profile, which CSS must use.

Since you can’t use !, there is currently no way to select what you want with pure CSS.

See also this answer about there being no parent selector, which links to the CSS specifications where you can find all defined selectors.

Community
  • 1
  • 1
Rory O'Kane
  • 25,436
  • 11
  • 86
  • 123
  • I do wish people would properly read the specs they link to. Even in the selectors level 4 api it's still not (likely) to be implemented: "[Fast vs Complete Selector Profile](http://www.w3.org/TR/selectors4/#subject)." Also, the Selectors api isn't finalised, yet, so it could, and probably will, go through several more changes yet. – David says reinstate Monica Jun 20 '13 at 14:35
  • @BoltClock: there are days it occurs to me that, just because I *can* have (another) espresso, it doesn't necessarily mean that I *should*... =) – David says reinstate Monica Jun 20 '13 at 15:03
0

CSS alone can't currently achieve what you're after. We have sibling selectors (+ and ~), but the element being targeted must come after the first element.*

As a simple example, check out this fiddle. Given this markup:

<p class="one">One</p>
<p class="two">Two</p>

and this CSS:

.one ~ .two { background: red; }
.two ~ .one { background: green; }

You might expect .one to end up green and .two red. In reality, only .two receives a background colour, because the second line is trying to style an element that comes earlier in the DOM.

* + is the adjacent sibling combinator, ~ the general sibling combinator. See this CSS Tricks article for details. They are very similar: + will only target an element that is directly after another specific element whereas ~ will target a sibling that appear anywhere after it.

CherryFlavourPez
  • 6,807
  • 4
  • 42
  • 47