I have a simple Css rule like so:
strong a:hover {
text-decoration: none;
}
This works for the following HTML:
<strong>
Go to website
</strong>
The problem is the Wysiwyg within the CMS i am using often puts the code in like so:
<strong>Go to website</strong>
My css rule then doesnt work. Is there are pure Css solution?
Thanks
Al
What you're trying to do isn't supported in CSS - you can't style the parent. A better approach here might be to add a class to the link:
Go to website
CSS:
a.ImportantLink { font-weight:bold; }
a.ImportantLink:hover { text-decoration: none; }
That way the link can easily be styled. <strong> may be semantically wrong if you use it just to style the link, and not to emphasize the text (though, that might be less important, to be honest)
Working Example: http://jsbin.com/ekuza5
This should work:
.hrefspan a:hover, strong {
text-decoration: none;}
<span class="hrefspan"><a>...</a></span>
By putting it in a span and applying the css only to the content of that span it will not affect other href's or strong's.
use
a:hover strong
{
text-decoration:none;
}
since you have define rule strong a:hover
indicates rules to be applied to the a tag which is present inside strong html tag
So the bit you actually want to change is the underling of the anchor
a:hover { text-decoration:none; }
If you want to have this only affect particular links on the page then apply classes to them.
<a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a>
a.notunderlined:hover { text-decoration:none; }
Related
I'm using the following pseudo classes:
a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}
Do I need to be that explicit or is there a more compressed way to get the same result?
No, there is no shorthand. But your selectors can be:
a {}
to select all links, or:
.recentposttitle {}
to get all .recentposttitle elements (we know that they are links already).
And another thing, :link is not needed really, you can write:
a {}
a:visited {}
a:hover {}
a:active {}
When you write a {}, you will set the declaration for all possible situations, so:
a {}
Is identical to:
a:link, a:visited, a:hover, a:active {}
And remember, the order of pseudo classes are importent:
:link
:visited
:hover
:active
Or simply remember LoVe HAte.
There is no shorthand selector in CSS for the pseudo-classes of anchors/links. So what you have is pretty well as terse as you can get.
W3 Link Training
a:link{ Declarations }
a:visited{ Declarations }
...
a:hover{ Declarations }
a:active{ Declarations }
I need to find the reference I've previously read to confirm this, but AFAIK, the :link pseudo-selector is only necessary if you are using old-style page anchors (<a name="..."></a>), so you should be able to safely eliminate that. Since your :active and :visited rules are the same, you could probably cut down what you've shown to this:
a.recentposttitle:active, a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
But you're not really saving that many bytes, so hard to say if it's worth it.
You can compress it by using CSS Frameworks like LESS or SASS.
Like from your example,
The CSS:
a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}
For example if you use SASS you can compress it to..
a.recentposttitle {
color: #000;
&:link{ color: #000; }
&:hover { color: #56A49F; }
&:visited { color: #000; }
&:active{ color: #000; }
}
You can also use Emmet, previously known as Zen coding for maximum code compressions.
Hope this helps.
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
I have default properties defined for my links like this:
a{
color: blue;
}
a:hover{
color: red;
}
The problem is that I lose the all the hover properties when I do something like this:
#header a{
color: gray;
}
So to keep the hover working as I defined it before in the defaults, I'd have to declare it again:
#header a:hover{
color: red;
}
Is there any way to do this without loosing the original hover action defined?
Unfortunately, if you want it to work in all browsers, you'll have to override it.
a { color:blue; }
a:hover { color:red; }
#header a { color:grey; }
#header a:hover { color:red; }
Example.
Alternatively, you can make use of !important. Usually this is a sign that something weird is going on in your css, but this seems to be the only alternative to duplicating your css.
a { color:blue; }
a:hover { color:red !important; }
#header a:hover { color:red; }
Example.
You could also make use of a css compiler such as sass or less which would let you write it in a manor where you aren't duplicating effort - but that's beyond the scope of this question.
You're over-riding the styles with a cascade. Putting "#header a" gives that style more weight than the original style. You can over-ride it with a !important (although I wouldn't recommend it). Here's an article that explains this concept.
One way you can do this is to specify the default style as !important.
Using !important is usually a sure fire sign that your code can be improved however in this context, and without re-defining the styles, it seems like the best choice (best I know of right now).
a:hover{
color:blue !important;
}
Working Example
Also note that if you do go down the route of using the specific selector that you can combine both selectors together to reduce code duplication.
a:hover, #header a:hover{ color: red;}
Hey SO, I am a bit rusty with my CSS, so bear with me :)
I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:
#content a,h3 {
border-bottom:none;
}
This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.
thanks!
Clarification:
<h3>Text</h3>
There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:
#faq h3 {
border-bottom: none;
}
The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.
a h3 { styles }
<h3>Hello</h3>
h3 a { styles }
<h3>Hello</h3>
Use this instead :
h3>a { text-decoration: none; }
Doing so you target every 'a' childs of 'h3'
Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.
For further reading and complete coverage of the CSS selectors you can refer to :
http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors
Cheers
#content a>h3 { border-bottom:none; }
should do it. The > means 'next tag must be'.
#content a h3 { border-bottom:none; }
would probably work too.
You use the comma for multiple rules e.g
h1, h2, h3 {
color: red;
}
For red h1 to h3
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?