更改一个元素的样式而不更改另一个元素？

Question

sorry the question doesnt make sense but i shall explain. I have two hyperlinks

<a href="" class="menu-link">home</a>
<a href="" class="menu-link">blog</a>

i want to apply this style

<style>
.menu-link{color:#000;}
</style>

but only apply to <a href="" class="menu-link">home</a> how can this be done other than actually changing the class like below

<a href="" class="menu-link-1">home</a>
<a href="" class="menu-link-2">blog</a>

Answer 1

If you're unable to modify the markup to add an additional class, you can select an element it by its href attribute, assuming it has one:

a.menu-link[href='home.html'] {
  color: #000;
}

Here's a live example.

Answer 2

You can assign multiple class to a single element.

<a href="" class="menu-link home">home</a>
<a href="" class="menu-link">blog</a>

all you need is add a space

<style>
.menu-link.home{color:#000;}
</style>

Answer 3

Assuming you can't / won't change the actual markup, try this (jQuery)

jQuery(function($) {
    var home = $("a.menu-link:contains('home')");

    // change style
    home.css("color", "#000");

    // add class
    home.addClass("other-class");

    // remove class
    home.removeClass("menu-link");

    // add / change attributes
    home.attr("id", "some-id");        
});

Answer 4

Maybe this solution will fit your needs.

<a href="" class="menu-link black">home</a>
<a href="" class="menu-link">blog</a>

<style>
.menu-link{}
.black {color:#000;}
</style>

Answer 5

Alt 1

You could add a style attribute to that anchor:

<a href="" class="menu-link" style="color:#000;">home</a>

Alt 2

Or you could add an id to that anchor:

<a href="" class="menu-link" id="specialstyle">home</a>

, and replace .menu-link with #specialstyle in your css.

Alt 3

Or you could give that anchor an additional class :

<a href="" class="menu-link menu-link-special">home</a>

, and replace .menu-link with .menu-link-special in your css.

Answer 6

You could add another class to menu-link-1 with the style you want:

<style>a.home { color: #000; }</style>
<a href="" class="menu-link-1 home">home</a>
<a href="" class="menu-link-2">blog</a>

edit : obviously, if I read the question, I would have noticed that the author didn't want to change the classes..

Answer 7

I am thinking that the 'home' link is the first one in these sequence so why not use

.menu-link { color: <your_default_color>; }
.menu-link:first-child { color: #000; }