Say I have a div for the main body text of a webpage, and a navigation div for links to the rest of the website. Now say I want the links in the body text to be green instead of the usual blue, but I want the links in the navigation div to be yet another color, perhaps red. If I make links green in CSS, then all the links will be green. If I make the text in the navigation div red with CSS, the link attributes seem to override the div's attributes for links in the navigation div. How can I target only certain links when no links have any classes attached to them?
Because of CSS specificity (I love that word) rules, JMC's suggestion works.
Read more about that here:
http://htmldog.com/guides/cssadvanced/specificity/
Basically, the more specific the rule is, the more likely it is to be used.
Use descendant selectors.
Style regular links, then only links within the #nav div:
a:link { color: blue;
}
a:visited { color: purple;
}
.navigation a:link, .navigation a:visited { color: green
}
Related
I have two types of styling to apply to links:
links appearing in the body of the page will always have blue hover (the section uses "linkColors" class, like <p class='contactInfo'>)
links appearing in the header have a different background color: they'll start with yellow hover when the page loads, then when the user scrolls down (and background goes away) we want blue hover like the others. (the section uses "Header-linkColors" class, and we have 'unscrolled' sub-class for different colors). I have javascript that adds/removes the class "unscrolled" depending on whether the user has scrolled.
My stylesheet has something like this:
.linkColors a:hover,
.linkColors a:focus {
color: blue !important;
text-decoration: none !important;
}
.Header-linkColors a:hover,
.Header-linkColors a:focus {
color: blue !important;
text-decoration: none;
}
.unscrolled a:hover,
.unscrolled a:focus {
color: yellow !important;
text-decoration: none;
}
I apply the class names to paragraphs, like <p class='contactInfo'>, and as mentioned I have javascript that also applies the 'unscrolled' class based on user behavior to the top node: <html class='unscrolled'>.
I'd like the 'unscrolled' class to only apply when added to elements with the .Header-linkColors class and NOT the linkColors class. But with the code above that 'unscrolled' sub-class is taking effect even for links in the section using class "linkColors" (toward the top of the content, visible before any scrolling): they start with the yellow hover and only use blue hover only after I've scrolled. Inspecting the element from the browser, it has class "linkColors", as well as "unscrolled" as expected.
In another attempt I explicitly defined ".Header-linkColors .unscrolled" and ".linkColors .unscrolled" with their own hover colors, but when I inspected the elements in the UI those styles weren't being recognized (probably based on how 'unscrolled' gets applied differently). I'm new to CSS so I have a hunch I'm misunderstanding how this is supposed to work.
What's the right way to keep the 'unscrolled' style to only take effect for links using the "Header-linkColors" class?
You should post your html code; the structure of the document is important in css.
What I think is happening: the space is an operator in css; it means you're selecting within elements that match the selector before it. By using it (.class1 .class2), you're selecting elements that have the second class within elements that have the first. By ommitting it (.class1.class2), you're selecting elements that have both classes.
.Header-linkColors.unscrolled a:hover,
.Header-linkColors.unscrolled a:focus {
color: yellow !important;
text-decoration: none;
}
But I can be understanding your html wrong: for example, if <a> elements are the ones with all the classes, then you'd need element.class1.class2:pseudoclass.
I want to make sure links appear in a different color even when I color the text that contains them. Right now my links show up as a different color but only when the text is not colored. If the text on the page is colored, I just see a different colored underline when I hover over them. I want people to know that there are links there. Thanks!
Welcome to Stackoverflow! You can specify your link styles in their various states by using the a: selector in your CSS. The link style will not be affected by any other styling rules in your CSS, unless you define a more specific rule (such as p a:link, which would affect all of the links inside of the <p> tags. Please see the code and link below:
http://jsfiddle.net/xAQL5/1/
HTML:
<p>
Text,text,text,goose Link
<p>
CSS:
p{
color:blue; /*Colors the paragraph text blue.*/
}
a:link{
color:black; /*This will make the default color of your link black.*/
}
a:hover{
color:green; /*When a mouse hovers over the link it will turn green.*/
}
a:active{
color:red; /*This will cause the link to turn red when it is clicked.*/
}
a:visited{
color:orange; /*This will specify the color of the link after it has been visited.*/
}
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 this code, please observe this fiddle:
http://jsfiddle.net/VjhJ4/19/
When you hover over the words, the text color changes to white - which is how I want it. However, when hovering over the 20px border-bottom, the text color does not change to white. Just hover your mouse over the border-bottom and check.
How do I make so that the text color changes to white when you hover the bottom as well? I currently have hover settings on ul#secondary-menu a:hover { color: #FFFFFF;}
Just add (or amend your existing CSS to include) the following:
#second-menu ul.nav li:hover a {
color: #fff;
}
JS Fiddle demo.
Can you explain why it was not changing the hover previously and how this helped. As I mentioned, my coding knowledge is limited so I am trying to learn what the issue was here
It wasn't changing the hover effects previously because you'd, presumably (and I am presuming, I gave up reading your CSS less than half-way through), specified a :hover rule for the a element that was a child of the li element, but the border is attached to the li, not the a. So hovering over the li's border had no effect.
This rule simply specifies that the colour of the a element within the li should be white (#fff) in response to the mouse hovering over the li element. In practice, placing this rule at the end of the stylesheet caused it to override any other conflicting rules that might have been declared elsewhere (and, once again, I gave up reading the stylesheet due to its length).
I'd recommend finding whatever rule you have that defines the a:hover effects, and add the two rules together, for example:
#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
color: #fff;
}
The specificity may not need to be quite so high, so you might be able to reduce the selector, to something shorter like:
ul.nav li a:hover,
ul.nav li:hover a {
color: #fff;
}
Oh, and it's worth noting that you have quite a mix of in-line (style="...") and external styles (using a stylesheet); try and use only the external form, for clarity and for ease of updating, editing and maintaining.
If you want the border to be a part of the hyperlink (that is, the user can click on the hyperlink when the mouse is over the border), then you'll need to remove the border from the li and add it to the hyperlink instead. If necessary, add display:inline-block to the hyperlink.
If the border doesn't need to be a part of the hyperlink, then #David Thomas's suggestion should be all you need.
Modified demo
Search for the string
ul#secondary-menu a:hover { color: #FFFFFF;}
in your css style and replace it with
ul#secondary-menu li:hover a{ color: #FFFFFF;}
I'm trying to figure out why the text in the left navigation panel on the following page is shrinking & underlining when you mouseover in Firefox.
http://fundcentre.newireland.ie/
Everything on the left & top is part of a wrapper that we inject our content into. Our content is everything from "FUND CENTRE" down.
Can someone suggest something I could do to sort this issue out? Thanks.
Stick .content in front of all your CSS rules.
So a:hover { ... } becomes .content a:hover {...}
This will limit any damage to the content div which appears to be all yours.
There are a couple of styles applied in your newIreland.css files. Which are causing this behaviour.
.ClipboardLink a:link, a:hover, a:visited, a:active {
font-family:Arial,Verdana,Helvetica,Sans-Serif;
font-size:12px !important;
padding-bottom:2px;
text-decoration:underline !important;
// check this line making css important causes it to be underline when you hover over
}
Text on the menu with mouse hover louses "bold" and gets "underline", this because you have :hover behaviors assigned with does properties...
I've took a sneak-peak to your css, but it's way to dense for my time right now... and to repetitive as well!
Try simplifying your css with common class's and find all your :hover events, taking a closer look to does who work on the same html elements as the one's used for the menu...
better yet, assign to the menu id or
class an :hover event with the same
properties than does used for the menu in normal
state!!