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.
Related
my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css
Normal:
And after I opened the product description
Here is anchor style from developer tool
So I need any idea how to separete ebay product css with my css.
One of the methods that I think is to add !important to all my styles, but I don't think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.
Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this
.leftbar {
float: left;
width: 20%;
background: #ccc;
}
a { /*think of this as default link style*/
color: black;
}
#main div:not(.product-desc) a { /*more specific selector*/
display: block;
color: red;
}
a { /*this one is from eBay*/
color: green;
}
<div id='main'>
<div class='leftbar'>
<a>Hello</a>
<a>World</a>
</div>
<div class='product-desc'>
<a>Description</a>
<a>Product</a>
</div>
</div>
You can use a :not selector to define your main style so it won't be disrupted by the eBay style
The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black
create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.
Here how you do:
create the icons/text of anchor inside a element and give inline CSS
<a href="http://www.example.com" target="_blank">
<span style="color: #ffffff !important;" >icons</span>
</a>
A quick test in Chrome shows that the
a:visited * { ... !important}
does override the inline style, but adding the !important back to the span works fine.
<span style="color: #ffffff !important;" >
For understanding it better. Learn here Overwriting Hover in anchor
Overwriting visited in anchor
Blockquote
If you want to remove all exist style and reset it to default you can use:
all: initial;
I am trying to apply a hover effect on a div. Why isn't this working at all?
My Html looks like this:
<a href="#panel-866" id="panel-866">
<div class="application-icon" style="background-image: url('/custom-icon-off.png')">
</div>
</a>
CSS
.tab-title > #panel-866 .application-icon:hover {
background-image:url(/custom-icon-hover.png);
}
You need to override the inline styles, which have higher specificity than external / embedded styles.
Try this:
#panel-866 > .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
Here's a demo: https://jsfiddle.net/0aghvn3u/
The '>' - selector gets direct descendants, maybe just remove
.tab-title >
and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.
Make it important so it overrides the anchor tag's default hover styles.
.tab-title > #panel-866 .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.
I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:
<a href="#panel-866" id="panel-866">
<span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
</span>
</a>
and
#panel-866 .application-icon {
height: 400px;
width: 400px;
display: block;
}
#panel-866 .application-icon:hover {
background-image: url(http://lorempixel.com/200/400) !important;
}
Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.
Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.
https://jsfiddle.net/3b2ywp5b/
I'm trying to place a link in Wordpress quickly and we have a pretty complex style being applied to all a href links in the section. Here's a small sample of the selector and the styles within (there's about 40 lines of styles which I held back)
div.content-rotator li.featured-content a {
margin: 0px;
border: 1px solid rgb(34,56,19);
}
Is there anyway I can place a link in this li and override the parent style? It has to appear within the li with class featured-content.
I don't want to touch the existing CSS at this stage so I'd prefer to implement inline styles on the a element.
Thanks
EDIT: Just in case it wasn't clear, the CSS above is coming from the style sheet and I'd like to zero it out.
There's > 50 lines of styles in this though, I've only shown two for brevity so inline replacing them all isn't really an option.
Just use inline styles or/and add !important to overriden CSS definition, like:
<div class="content-rotator">
<ul>
<li class="featured-content">
...
</li>
</ul>
</div>
or
div.content-rotator li.featured-content a.other {
margin: 3px !important;
border: none !important;
}
Give the selected link an ID and just add !important to the styles. I don't think there is a better alternative unless you plan to go through the entire stylesheet.
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 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/