I have a post that has a title. I select like so =>
<h4><strong><%= link_to post.title, post, :class => "post-title"
%></strong></h4>
I want to take away the text-decoration it gets by default form being a link. So i have this in my posts css =>
.post-title {
text-decoration: none;
}
I have tried selecting the text in all kinds of different ways and I just can't get that text-decoration to go away..
the html output is just the title of the post with standard text-decoration (blue color with an underline)
I checked safari web inspector and none of my rules were overridden.
It worked when I gave the erb an id of post-title and did the following in my css to select it:
a#post-title {
text-decoration: none;
}
Try...
a.post-title {text-decoration: none;}
There's not enough CSS specificity in your selector.
There will be a browser or reset stylesheet applying the text decoration to anchor elements and your stylesheet applying it to anything with a class of 'post-title'. At the moment the anchor style is winning.
Example
a {text-decoration: underline} //Browser CSS
.post-title {text-decoration: none} //Your CSS
Both of those apply to...
a.post-title
Related
I am trying to figure out how to style links in react.
I've seen this post and tried most of it's suggestions.
I have defined a footer styling class as:
.footerlinks {
a:link {color: $Hand3};
font-weight: 300;
font-family: $secondary-font;
a:link {text-decoration:none; background-color:transparent; color: #FAF5F2;};
a:visited {text-decoration:none;background-color:transparent; color:#FAF5F2;};
a:hover {text-decoration:none;background-color:transparent; color:#FAF5F2;};
a:active {text-decoration:none;background-color:transparent; color:#FAF5F2;};
color: $Hand3;
}
Then, I have a footer link as:
<Link to={'/about'} className="footerlinks">About</Link>
The 'color' css field applies, but none of the a tag links work. When you hover on a link it turns blue underline. The css inspector shows the webkit a styling has been misapplied, except for the pointer.
What's the trick to styling a tags in react?
It should work the same as with regular HTML and CSS. Assuming you are using react-router or similar, Link should generate an a tag.
I think the problem is where you have put the class. The CSS is expecting a component with the class footerlinks followed by an a element inside.
Try changing your code to:
<div className="footerlinks">
<Link to={'/about'}>About</Link>
</div>
If you directly want to apply css on react links, you have another option that is
You can use <NavLink> instead of <Link>
<NavLink
className="CssClassForNormalLinks"
activeClassName={location.pathname !== "your pathname"? null : "CssClassForActiveLinks"}
to="/home"
>
HOME
</NavLink>
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'm new to css. Here's my html
Add Note
The class "clickme" is part of a jquery function and the id is supposed to change the size from the standard of other links but it isn't making the text smaller.
#noteaddbutton{
font-size:13px;
}
a:link{
font-size:18px;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
It is working for me. I am using FF8. You can try this.
#noteaddbutton{
font-size:13px !important;
}
I think a:link is taking precedence over #noteaddbutton. Try using
a.clickme:link{ font-size: 13px;}
CSS is read starting at the top and going down (cascading style sheet). The element you are attempting to style has the following qualities about it,
<a> tag
#noteaddbutton
.clickme
In your css, you are styling all <a> tags and #noteaddbutton, but the <a> style is after the style just for the ID. Since the ID style is before the <a> style, the <a> style takes precedence.
You can fix this by doing two things...
1.) Putting the ID styles below the <a> styles:
a:link{
font-size:18px;
text-decoration:none;
}
#noteaddbutton{
font-size:13px;
}
2.) Putting !important after the font-size attribute on the ID style
#noteaddbutton{
font-size:13px !important;
}
You can put #2 anywhere you like.
Try making the class !important allowing it to take precedence:
a:link{
font-size:18px !important;
text-decoration:none;
}
It works for me, by example in this fiddle: http://jsfiddle.net/GFnK7/2/
First link is 13px and on yellow background for me (Fx9, WinXP).
The 2nd link has a dummy destination that you shouldn't have visited for now. I see it on lightgreen bg, 18px and then after a click on violet bg, if and only if layout.css.visited_links_enabled is set to true in about:config.
The 3rd link is identical to the 2nd one.
The pseudo-class :link applies to un-visited links. With a value of # for href, you'll soon have visited this URL ;) (after one click on any href="#" link)
Note: a selector with an id should be more specific than another selector with only a pseudo-class and an element (:link with a). This is (1,0,0) against (0,1,1) in terms of selector specificity.
Am using css for some site. I noticed that the a:active style definition in my css file does not work at all. I was told by someone that I have to put the definitions in this order
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
I have done so but it's still not working. Please could someone tell me why it is not working and a possible workaround. Thanks
Here is a working example:
http://jsfiddle.net/BMHUz/
Click and hold on the anchor tag and you will see it turn orange.
a:active just stay for the few milliseconds you are clicking the link.
May i ask what you expect to see? In case you want a link to be a different color if you are on that page, thats not what a:active is for
If you want a link to be a different style if you are on that page, then you need to use jquery or javascript to change the style of active link.
jquery
$('a[href="' + window.location.href + '"]').addClass('active');
CSS
a.active{
/* your CSS for active link */
}
Put !important to the property if it is already defined to the anchor.
a {
color: white;
}
a:active {
color: black !important;
}
i wonder why i can't use, or should not use
a { ... }
vs
a:link, a:visited { ... }
If you only style a {...} then the style will be applied to all anchor elements including <a name="..."></a> elements, which define an anchor within the page, but do not reference a hyperlink.
a:link {...} specifically relates to hyperlinks. :visited, :hover and :active are different states of these links. Note that :hover and :active can apply to other elements as well.
You may provide the general style for your links with the a only. More specific styles can than be applied to the pseudo-classes. For example:
a {
text-decoration: none;
font-weight: bold;
}
a:link {
color: #00F;
}
a:hover {
color: #F00;
}
a:visited {
color: #888;
}
a:active {
color: #0F0;
}
In this example, all links are styled bold and are not underlined. But the color changes for each type of link...
It's just a matter of it you want to have different styling for a visited link vs normal links or not (for example dim out the link, I was already there).
Just a is valid, but do you want to give :visited or :hover links special styling for example?
:visited means you are trying to give a link a styling that has been visited by the user before and :hover means you are trying to give a link a style when a user mouse overs that link. You may or may not use it. This is your choice.
a:link if for an unvisited link, while a:visited is for a link that the user has visited. Usually the user will want some way to differentiate between the two in which case you'll style them separately. If you don't want any differences (e.g. a menu) then just a will do.
While the first a refers to all links, :link and :visited refers to specific states of those links.
The first one refer to non-visited links, and the latter to visited one. see http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes for more infos.
If you style a {...} it is work like a:link, a:visited {...}. Also a:link can't override a {...} style but a:visited can. If you want to add style all state of a it is better to use a {...}. Also a:link only apply a elements which have href attriubute.