Is there a way to override all css rules applying to tag

Question

Edit: is there a way to change the color of a clicked link and keep it that color until another link in the navigation bar is clicked? Can anyone provide me with a Javascript code which is hard coded and changes the color of a clicked active link?

Edit: I also inspected the element in the Chrome browser and when I inspect the element and look in the styles section, there is no CSS which forces the clicked and active link to be white. Is there a way to check if there is a Javascript code which does that? I don't know much Javacsript code so I wouldn't know what to look for. Also, how would I force :active on an element using Chrome DevTools?

Basically, I bought a template of a website online and have the code. The template has many files and is very javascript based. So in the navigation bar, if I click a link, the web page wont change, the layout will change and the web link will change (it will go from, say, site.com/index to site.com/contacts) but the actual web page won't change. Also, the links in the navigation bar are all green and when I click a link, the active link will be glowing white while all the other links are green. I can't find where this part of the code is so I am wondering is if there is a way to just override all css rules which apply to the tag and just do

a:avtive {
    color: red;
}

I did try

a:active {
    color: red !important;
}

but that didn't work, it didn't do anything.

So far my code is

<nav class="menuL">
<ul id="menu">
<li><a href="#!/page_about"><span></span>biography</a></li>
<li><a href="#!/page_portfolio" id="portmenu"><span></span>portfolio</a></li>
<ul id="submenu">
    <li class="subclass" id="first"><a href="#!/page_wine">Wine</a></li>
    <li class="subclass" id="second"><a href="#!/page_landscape">Landscape</a></li>
    <li class="subclass" id="third"><a href="#!/page_divers">Divers</a></li>
</ul>
</ul>
</nav>
<nav class="menuR">
<ul id="menu2">
<li><a href="#!/page_galleries"><span></span>galleries</a></li>
<li><a href="#!/page_contacts"><span></span>contact</a></li>
</ul>
</nav>

You can try to put the default CSS if you can find out what it is: http://stackoverflow.com/questions/32875/browsers-default-css-stylesheets — aug, Jul 13 '13 at 01:19
Are you sure you want to use :active? This is just while you click on the link. There is also :link :hover and :visited. — Andy G, Jul 13 '13 at 01:20
@Andy G wait, isn't :active basically the link clicked until a different link is clicked? So a:active { color: red } would keep the link clicked red until another link in the nav bar is clicked right? — user216485, Jul 13 '13 at 01:30
@Andy G then is there a way to change the color of a link until another link in the navigation bar is clicked? — user216485, Jul 13 '13 at 01:43
I don't follow. When you click a link it changes the page. If you want the link to the *current page* to be a different colour then that requires a little more work. — Andy G, Jul 13 '13 at 01:47
@AndyG Ya that's what I mean, I want the colour of the link to the current page to be different than all the other links in the navigation bar. — user216485, Jul 13 '13 at 01:54

CompanyDroneFromSector7G · Accepted Answer · 2013-07-13T02:22:01.070

1

Updated jQuery solution:

$(document).ready(function() {
  $('nav a').click(function() {
    $(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor');
    $(this).addClass('activeAnchor');
  });
});

Then you need some css for the class, e.g.

a.activeAnchor {
  color:red;
}

So in your header you need:

<head>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="http://link-to-your-jquery-script.js" type="text/javascript"></script>
  <link href="link-to-your-style.css" rel="stylesheet" type="text/css" />
</head>

edited Jul 13 '13 at 02:22

answered Jul 13 '13 at 01:22

CompanyDroneFromSector7G

4,291
13
54
97

It's hardcoded in JS like this .. but maybe no choice. Personally i'd rather die before writing the whole style of a site in jQuery or JS – Robert Hoffmann Jul 13 '13 at 01:24
So don't write the whole style of the site in jQuery - that would be retarded! – CompanyDroneFromSector7G Jul 13 '13 at 01:25
Ya see, putting this code in my index.html file didn't do anything, no changes were made, the active link still doesn't become red. I think the color is hard coded.. Can anyone provide me with a Javascript code which is hard coded and changes the color of a clicked active link?.. but wait, the code bukko provided, doesn't it have to go in between – user216485 Jul 13 '13 at 01:37
Did you investigate with Chrome as some have suggested? Just right-click the anchor and choose "Inspect element" - on the right will be a break-down of the styles applied and not applied. – CompanyDroneFromSector7G Jul 13 '13 at 01:48
Yup, When I inspect the element and look in the styles section, there is no CSS which forces the clicked and active link to be white. Is there a way to check if there is a Javascript code which does that? I don't know much Javacsript code so I wouldn't know what to look for. Also, how would I force :active on an element using Chrome DevTools? – user216485 Jul 13 '13 at 01:51
Ah I see you're asking for something different now. – CompanyDroneFromSector7G Jul 13 '13 at 01:56
@bukko hm okay, and the updated javascript code you provided goes in between – user216485 Jul 13 '13 at 02:02
No it needs to be in a separate file becuase you need the jQuery library as well, and that must be referenced before this script. – CompanyDroneFromSector7G Jul 13 '13 at 02:03
Right, I imported Jquery 1.7.1.js in the same .html file. It should work right? Is there any part of your code which assumes that one of my tag / class names is a certain class name? See my updated reply to you as well. – user216485 Jul 13 '13 at 02:07
I updated the answer to show how to add the jquery library and script, and also to work with several nav elements. – CompanyDroneFromSector7G Jul 13 '13 at 02:10
Hm okay, I also wrote some of my code if it helps. Also, you ended only one script tag, i'm guessing it was a typo and the first script tag needs to be ended too? – user216485 Jul 13 '13 at 02:14
Yeah it was a typo - it was meant to close the head tag - script tags also should be closed :/ Well spotted! – CompanyDroneFromSector7G Jul 13 '13 at 02:16
Hm, still doesn't work. Nothing happens.. Can you try looking at my code and see if it helps? :/ – user216485 Jul 13 '13 at 02:16
Ok, I updated the script again. Make sure your script includes the `$(document).ready` bit... – CompanyDroneFromSector7G Jul 13 '13 at 02:23
Hmmm okay you're code seems to only work for id="submenu" (looking at my code again).. submenu seems to be the only thing which is effected by your code, the actual navigation bar isn't effected for some reason.. any ideas? – user216485 Jul 13 '13 at 05:31

score 0 · Answer 2 · answered Jul 13 '13 at 01:18

0

You should be able to override them as long as your css comes after their css, and as long as they are not setting colors hardcoded in JS ..which i doubt

a:active {
    color: red !important;
}

!important is not very good as it's hard to debug

answered Jul 13 '13 at 01:18

Robert Hoffmann

2,366
19
29

I think they are setting colors hardcoded in JS, I tried moving the CS all the way to the bottom but that didn't work. I moved it all the way to the top, still didn't work. would nav > a:active take precedence over a:active? Also, is there any key word which I can try searching for in the JS files to see if they are setting the colors hardcoded in JS? – user216485 Jul 13 '13 at 01:21
Usually in JS you just change classes on elements, not downright the colors. Try like Andrey said, open Chrome dev tools, or Firebug in firefox and inspect the elements to see how they are set up – Robert Hoffmann Jul 13 '13 at 01:23

score 0 · Answer 3 · answered Jul 13 '13 at 01:21

0

There is no way to do that for all rules — if they apply some styles directly to an element using JavaScript you will not be able to override them in general case.

You can use Chrome DevTools to identify which CSS produces the white color rule. It allows you to force :active on an element. If there is no CSS rule, then it is probably done in JavaScript.

answered Jul 13 '13 at 01:21

Andrey Shchekin

21,101
19
94
162

When I inspect the element and look in the styles section, there is no CSS which forces the clicked and active link to be white. Is there a way to check if there is a Javascript code which does that? I don't know much Javacsript code so I wouldn't know what to look for. Also, how would I force :active on an element using Chrome DevTools? – user216485 Jul 13 '13 at 01:34

score 0 · Answer 4 · answered Jul 13 '13 at 01:39

0

Look up the link a link for class attribute it will looks like class="nav" or something. then apply . a.nav:active{your style;} where nav is the class

answered Jul 13 '13 at 01:39

Sagar V

12,158
7
41
68

Is there a way to override all css rules applying to tag

4 Answers4