CODEWITHSUNDEEP
javascriptjquerycssclassstyles
Yusaf Khaliq
Yusaf Khaliq

Reputation: 3393

change style of one element without changeing the other?

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>

Upvotes: 1

Views: 320

Answers (7)

edwardmagbago
edwardmagbago

Reputation: 161

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; }

Upvotes: 0

Michael Berkowski
Michael Berkowski

Reputation: 270727

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.

Upvotes: 5

Phil
Phil

Reputation: 164924

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");        
});

Upvotes: 1

Ibu
Ibu

Reputation: 43850

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>

Upvotes: 4

Brian
Brian

Reputation: 1094

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..

Upvotes: 0

enloz
enloz

Reputation: 5844

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>

Upvotes: 1

poplitea
poplitea

Reputation: 3737

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.

Upvotes: 0

Related Questions