How to target a parent class in CSS?

Question

Is there a way to target a parent class in CSS?

<div class="accountarea">
    <a class="auglink" href="/account">
        Account <i class="fa fa-angle-down icon-right"></i>
    </a>
    <div class="accountappear">
        <div class="accountforce">
            You are not logged in to an account.
            <form action="account.php" method="post">
                <input type="text" name="email" placeholder="E-mail Address" />
                <input type="password" name="password" placeholder="Password" />
                <input type="submit" name="login" value="Log In" class="minisubmit" />
            </form>
        </div>
        <div class="accountbottom">
            ddd
        </div>
    </div>
</div>

I need it so that if any input field in accountarea is on focus (:focus), then accountarea should stay visible (it's currently set to go visible on hover - I need both).

Is there a reason why you don't wan to do this with jQuery or JavaScript? — jeanpier_re, Apr 29 '15 at 03:02
Its discussed at length here, have a look http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Rohit Gupta, Apr 29 '15 at 03:02

score 2 · Answer 1 · answered Apr 29 '15 at 03:17

2

There isn't a way to select the parent element with CSS right now.

Using JavaScript is currently your best option.

If jQuery is already loaded on your page see the docs on Tree Traversal

answered Apr 29 '15 at 03:17

bob

953
12
19

How to target a parent class in CSS?

1 Answers1