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.
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.
a .action_button:hover{
text-decoration:none;
}
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>
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.
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.
http://api.jquery.com/has/
Related
Is it possible to change the background-color of a div inside a link using only a :visited pseudo class and without using Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
width: 50px;
}
.smallbox:hover {background-color:blue;}
.smallbox:visited {background-color:green;}
</style>
</head>
<body>
<div class="smallbox"></div>
</body>
</html>
Yes, I believe you can do this. Just remember the visited pseudo class belongs to the link, not the div.
a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}
.smallbox {
display: block;
background-color: #666;
height: 50px;
width: 50px;
}
<span class="smallbox"></span>
As pointed out by Dekel in the comments, a div inside an anchor element is invalid HTML. You could cheat and put a span inside the link and set its display property to "block", but that's probably not really better.
If you just need a link that behaves like a block element rather than an inline element, consider switching the anchor tag's display property to block and removing the inner element entirely as suggested in this post: <div> within <a>
Instead of applying it to a div, why not apply it directly to the "a" tags, as you did, and remove the div? Why do you need it? a: hover { background-color:blue; } should work just fine. You just need to add a display:block to the a:hover style, as well.
Or, if you have multiple a tags on the page and only want to apply it to one of them, you can use an id and apply it to that:
<a id="someId" href="#">My Link</a>
CSS:
#someId {
background-color: blue;
display: block;
}
Is there a way to do this without javascript and just using CSS?
I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.
What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.
I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.
Put another way, I'd like to alter an element based upon the hover state of it's parent element.
It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:
li:hover {
background: orange;
}
li:hover a {
color: white;
}
Demo
You can try this. Giving a tag display:block; will take the full width of your li element.
#menu li a:hover {
background: #FC6;/*added*/
}
#menu a {
color: #000;
dispaly:block;/*added*/
}
DEMO
I can't figure out how to properly do this. I have the following CSS:
#container > #main > #content > a {
color: #3B7315;
}
I'm using that to supposedly style all <a> tags in the #content div. The problem is, however, it doesn't seem to style <a> tags inside divs or nested lists, etc. It only styles the top-most tags such as the following:
<div id="content">
Lorem ipsum
</div>
When I put the link inside another element, the styling is gone.
So how do I include the whole sub elements and make the style recursively apply itself from #content onwards? I think I'm looking for a wildcard value of sort?
You made it much more complicated than it needs to be:
#content a {}
#content a, #content a:link, #content a:visited {base style rules}
#content a:hover, #content a:visited:hover, #content a:active {over style rules}
#content a:focus {wai style rules}
All that is necessary is the container and its anchors you are trying to style. The following should work fine, especially if that div you are using is an id, because then it wont be repeated onto other elements, as it would if you had a class on that div and other divs.
#content a{ style rules; }
Hope this helped!
the symbol > is only applies to the direct child..that's why if you use that it would be only applied to the first child a of the element id content
I began to learn html'n'css, but I've encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be "any div within a link element", and because the link is red, I think it is correct.
I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.
The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:
<div>Blabla</div>
and the style:
a.menuitem {...}
a.menuitem div {width:...;}
Here is the minimal (non-)working Example:
<html>
<head>
<style>
a div.menuitem {
text-decoration: none;
color: red;
}
.remove-under {
text-decoration: none;
}
</style>
</head>
<body>
<a href="./index.html">
<div class="menuitem">Link1</div>
</a>
<a href="./index.html" class="remove-under">
<div class="menuitem">Link2</div>
</a>
</body>
</html>
Thanks a lot!
Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements - and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.
Here is your new code:
<a href="./index.html" class="menuitem">
Link1
</a>
<a href="./index.html" class="remove-under menuitem">
Link2
</a>
You can have multiple classes to an element by putting a space, so Link2 has the class "remove-under" and "menuitem"
Update your CSS to remove the underline:
.remove-under {
text-decoration:none;
}
In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:
.menuitem {
display:block;
width: 100px;
height: 50px; /* or whatever your desired width and height */
background: red; /* to show that the whole anchor will be link, not just text */
}
This is not the ideal solution. You really should not be putting block level elements inside inline elements.
However, if you absolutely must get it working, you can add display: inline-block; to the div.
a div.menuitem {
text-decoration: none;
color: red;
display: inline-block;
width:100%;
}
.remove-under {
text-decoration: none;
}
You have 2 problems here:
You can't do something like this
<div></div>
because a is an inline element. What you do here is an invalid HTML code. DO it like this:
<div></div>
You try to apply text-decoration:none on the div element and you should apply it to the a element.
a {text-decoration:none;}
I have a <div> inside a <a>, that I don't want to be underlined.
HTML :
<a href="/joomla17/contact">
<div class="button">nous contacter</div>
</a>
A generic a rule is defined elsewhere.
I tried this with css :
.button {
text-decoration: none;
}
but it is still underlined. Checked with Firebug that the text-decoration: none isn't overridden.
I feel that I have to specify a:link, but I don't know how to make it match my class
Since you are using the div with display: inline;, its not necessary because a is an inline element by default. So why put an inline container inside an inline element?
<a class="button" href="/joomla17/contact">nous contacter</a>
But maybe you have some special reasons for that build, so this could be an solution with the div. Since the div is inside the a, it inherits the properties of a, so normally it should inherit the underline thing too. But maybe you need to set that on the div explicitly.
.button, .button div { text-decoration:none; }
Maybe you need to add !important in front of the ;, depends on the complexity of your layout.
Try
.button{text-decoration:none !important;}
to avoid that your style is overriden by any following rule.
If you want to use pseudo classes on your a-element it would look like this:
a:link{/* ... */}
a:active{/* ... */}
a:hover{/* ... */}
a:visited{/* ... */}
and if you want to access the div when the link has a specific state use
a:hover .button{/* ... */}
for instance.