How do I change css on only part of a link_to link?

Question

If I have a <%= link_to "BlueBottles" %>, how do I change CSS on only part of it, say, to make the first four letters Blue?

Separate links just doesn't look right and I'm afraid I'm falling short on the proper way to do it. Thanks in advance for any help!!

Marcelo De Polli · Answer 1 · 2013-01-28T16:43:21.223

2

Since you're using Rails helpers, you would have something like this (remember to replace your_path with the appropriate Rails route):

<%= link_to content_tag(:b, 'Blue') + 'Bottles', your_path %>

And then is your CSS, like in Bastian Rang's answer:

a > b {
  color: blue;
}

Edit: changed :em to :b as per Bastian Rang's suggestion.

edited Jan 28 '13 at 16:43

answered Jan 28 '13 at 11:37

Marcelo De Polli

Bastian Rang · Answer 2 · 2013-01-28T11:40:00.727

1

if you the following link

<a href="http://www.stackoverflow.com">BlueBottles</a>

You may change it to

<a href="http://www.stackoverflow.com"><b>Blue</b>Bottles</a>

and style a > b {color:blue} in your CSS

instead of the B-Element, you can use em, strong or even i

edited Jan 28 '13 at 11:40

answered Jan 28 '13 at 11:33

Bastian Rang

1

Semantically it may be better to use a tag rather than unless it is being emphasised. – drmonkeyninja Jan 28 '13 at 11:36
The tag is never a better option semantically than or , for the simple reason that it describes presentation rather than semantics. – Marcelo De Polli Jan 28 '13 at 11:38
@mdepolli not, it does not strictly describes presentation. if you refer to the html5-standard there is a specific semantic meaning for all of them - and a default representation. – Bastian Rang Jan 28 '13 at 11:42
stated "Nov 7 '08 at 11:07" - before html5 was thought about. - you are right, if you stick to lower html or xhtml-versions. the current version of html is 5 - and there we have semantics in all of them: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-b-element – Bastian Rang Jan 28 '13 at 11:50

score 0 · Answer 3 · answered Jan 28 '13 at 12:31

0

There's a block form for link_to, I think this is a case where you want to use it :

<%= link_to your_path do %>
  <span class='special_anchor_part'>Blue</span>Bottles
<% end %>

Then css :

.special_anchor_part{ color:blue; }

answered Jan 28 '13 at 12:31

Anthony Alberto

thanks for your help...they still end up getting displayed as separate links, with a gap in the middle. Is there a way to keep the link as all one word but with different stylings? – user1836346 Jan 28 '13 at 12:45
They're not supposed to display as two links ... you may have some extra css that breaks it, `display: block` on the span maybe ... try to analyze the output in Firebug/chrome inspector to see where it comes from – Anthony Alberto Jan 28 '13 at 12:51

3 Answers3