Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Exclude CSS from a particular line 2

Status
Not open for further replies.
Hondy

Hondy

Technical User
Mar 3, 2003
864
GB
Hi

How would I stop CSS being applied to a line of code?

I have a page which I want to change, the CSS is formatting all links in the same way, which is good. But... I want to change the colour of the "login" link but the CSS overrides it back to the CSS applied style.

Thanks

H
 
Sort by date Sort by votes

Give the login link a class... and use that to provide a more specific CSS definition (than you currently use for styling anchors):
Code: 
...
<style type="text/css">
.clientLogin a {color:orange;}
a {color:green;}
</style>
...
<body>
<div>
<a href="#">Test 1</a>
<a href="#">Test 2</a>
<a href="#" class="clientLogin">Client Login</a>
...
Note that I have a long definition for the client login CSS... this makes the definition more specific... and it will over-ride the green definition for anchors (but only when anchors appear in something with a class of 'clientLogin'.

Let us know how you go. If you are having problems... make the smallest example page you can... and post the code here (or a URL to it).

Hope this helps
Jeff

 
Upvote 0 Downvote
Actually Jeff, your code will apply to all <a> elements within another element with a class of clientLogin. So in the code above, the code should not work since the class is applied to the <a> element.
 
Upvote 0 Downvote

Ah. Yup. I figured that out over a bowl of fat rice noodles for dinner and was just logging in to provide an update.

Here is a much more likely solution to the problem (using an ID to provide more specificity to the CSS declaration):
Code: 
...
<style type="text/css">
#clientLogin a {color:orange;}
a {color:green;}
</style>
...
<body>
<div>
<a href="#">Test 1</a>
<a href="#">Test 2</a>
<span id="clientLogin"><a href="#">Client Login</a></span>
...
The key to this problem/solution is specificity (check out what google has to say on this regarding CSS). Even though you might immediately expect all "a" tags to be green (given the order they are defined in the style section), the one in the span is orange.

Sorry for any confusion that my earlier post may have lead to. That's 2 times today I've posted broken code... more coffee and less distractions for the rest of the day [smile]

Jeff
 
Upvote 0 Downvote
Complicated.

Why not just do this?
Code: 
...
<style type="text/css">
a {color:green;}
a.clientLogin {color:orange;}
</style>
...
<body>
<div>
<a href="#">Test 1</a>
<a href="#">Test 2</a>
<a class="clientLogin" href="#">Client Login</a>
...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Even though it breaks away from CSS this works:

Code: 
<style type="text/css">
a {color:green;}
</style>
...
<body>
<div>
<a href="#">Test 1</a>
<a href="#">Test 2</a>
<a href="#"><font color="orange">Client Login</a>
 
Upvote 0 Downvote
Upvote 0 Downvote
Code: 
<a href="#" style="color:orange">

was what I was looking for but forgot. :~/ Thanks!
 
Upvote 0 Downvote
OK thanks for your replies they help a lot, from this i have isolated the issue to be the controls.

Given the pages below, how do I change the font colour on example 2?

Thanks!!

Page 1 works -----------------------------------
<style type="text/css">
#loginBox a {color:white;}
a {color:green;}
</style>
<TABLE cellSpacing=1 cellPadding=4 width=160 bgColor=#0000cc border=0 nowrap>
<TBODY>
<TR>
<TD span id="loginBox" width=98><a id="loginLabel" href='#'>Login</a></span></TD></TR>

<TR>

Page2 doesn't work --------------------------------

<style type="text/css">
#loginBox a {color:white;}
a {color:green;}
</style>
<TABLE cellSpacing=1 cellPadding=4 width=160 bgColor=#0000cc border=0 nowrap>
<TBODY>
<TR>
<TD span id="loginBox" onmouseover="this.style.backgroundColor='#EFEFEF'; this.style.cursor='hand'; this.style.cursor='pointer'" style="BACKGROUND-COLOR: #ffffff" onmouseout="this.style.backgroundColor='#ffffff';" width=98><a id="loginLabel" href='#'>Login</a></span></TD></TR>

<TR>
 
Upvote 0 Downvote
Lordy, what a mess. Do it like this:
Code: 
<style type="text/css">
#loginBox a {
display: block;
width: 98px;
background-color: #FFFFFF;
color:white;  /* Do you *really* want white-on-white? */
}
#loginbox a:hover {
background-color: #EFEFEF;
}
a {color:green;}
</style>
<TABLE cellSpacing=1 cellPadding=4 width=160 bgColor=#0000cc border=0 nowrap>
<TBODY>
<TR>
<TD id="loginBox"><a href='#'>Login</a></TD></TR>
Remember that the <style> element has to go in the <head> of your document.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
812
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
637
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
765
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
223
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top