Specific CSS Selector - Surround Element

Question

I have the following markup:

<a><div class="action_button">Log In</div></a>

I have styling on .action_button to make it bigger and have a background etc.

I also have styling on .action_button:hover to make it have a lighter background and an inset shadow when the user hovers on it.

How do I apply styling to the anchor tag that surrounds it, but only when it surrounds a .action_button div.

For example, this works:

a:hover {
    text-decoration:none;
}

But it affects all links, I only want to affect those that surround the .action_button divs.

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — BoltClock, Nov 18 '11 at 13:17
never put block element inside an inline element it's a bad merkup — sandeep, Nov 18 '11 at 13:17
That said, I suggest you move the `action_button` class to the `a` and style it so it behaves like a block element. You don't need to explicitly create a `div` just so it functions like a block element. — BoltClock, Nov 18 '11 at 13:19

Šime Vidas · Accepted Answer · 2011-11-18T13:29:32.270

3

Why not just:

<a class="action_button"></a>

CSS:

.action_button {
    text-decoration: none;
    display: block; 
    /* other styles */
}

I don't see the point of having a DIV inside an A. If you want the anchor to be a block, just set display: block on that anchor directly.

edited Nov 18 '11 at 13:29

answered Nov 18 '11 at 13:17

Šime Vidas

score 0 · Answer 2 · answered Nov 18 '11 at 13:16

0

a .action_button:hover{
    text-decoration:none;
}

answered Nov 18 '11 at 13:16

antyrat

score 0 · Answer 3 · answered Nov 18 '11 at 13:18

I would change the code around slightly - the <a> should be nested inside the <div>, as the div is a block element and the anchor tag is inline.

Then you can simply use the following:

<style>
    .action_button a       {text-decoration:underline; }
    .action_button a:hover {text-decoration:none; }
</style>

score 0 · Answer 4 · answered Nov 18 '11 at 13:19

0

I think you need to add a class to the "a" element that contains the button. you can't build a selector that works in the other direction.

answered Nov 18 '11 at 13:19

idanzalz

score -1 · Answer 5 · answered Nov 18 '11 at 13:27

-1

You can use JQuery to add a class to every "a" that has a div with the class .action_button

$("a").has("div.action_button").addClass("myclass");

And then, obviously, use that class to select your "a" tags.

answered Nov 18 '11 at 13:27

vgardner

2

jQuery is awesome. Javascript solutions to CSS problems, not so much. – Stephen Nov 18 '11 at 13:29

5 Answers5