CSS Style a specific link

Scenario: I am in the process of creating a website for the company I work for. I need to follow their visual style guide so I'm creating a CSS file for the website.

Question: All the "more" links need to be in 11pt font w开发者_开发问答hile the body is in 12pt. Is there a way to specify that if the link is "more" that it will be styled in 11pt?

Edit: Is there anyway to do this without using a class? Based off the text instead?

Summary: I need to style specific links but I would not like to use classes to style them, maybe text instead?

HTML

<a href="whatever.html" class="more">More</a>

CSS

body {
    font-size: 12px;
}

a.more {
    font-size: 11px;
}

"Can you give those links CSS classes?"

So, you could use something like:

<a class="more-link" href="http://clownlovers.com">MORE</a>

And thus you could style those with CSS along the lines of:

a.more-link {
    font-size:11px;
}

If you can't do that, then I think you could write a little javascript program to go through and change any such links to the font you want. That's kind of minimal to implement, but I think that's an ugly hack, particularly since on slower machines, you may even initially see the default font appear until js runs and shifts things.

specify a class for more link. for eg...

<a href="#" class="link">more</a>

In CSS:

Use..

body
{
 font-weight:13pt;
}
a.link
{
font-weight:11pt;
}

If the links are defined in existing declarations, as is probably the case, you'll have to enforce each and every rule with an important keyword.

HTML

<a href="link.html">Normal link</a>

<a href="link.html" class="more">More</a>

CSS

a:link {
   font-weight:12pt;
}

a.more:link, a.more:hover, a.more:visited {
   font-weight:11pt !important;
}

I didn't see this method used in any answer so maybe some people find it useful:

    .a[href="link.html"]{
        //your styles
    }

Will apply those styles to every tag with a href of "link.html", I'm not sure about the compatibility tho, so I'll keep looking into this, hope this helps!

There isn't a way for CSS to sift through content like that, but could use jQuery to find all anchors that have the word "more" in it and change it based on that:

$("a:contains('more')").css("font-size", "11pt");

Not a CSS solution, but this is pretty much the only way you could do what you are asking for. Example for you here.