CODEWITHSUNDEEP
css
Nathan
Nathan

Reputation: 319

Styling links for one part of a page but not another

first off I want to say thanks for making me welcome, I've learned more in the last few days on here than I have in the last 6 months offsite, so props! My question is one that has bothered me for a long time, I can't find an appropriate answer, perhaps I am asking the wrong question though. Basically I have links for my header navigation that I want to customize without affecting the rest of the links on the page. I want them to change color on mouse over, etc using purely css without changing the links in the body. How do I do this since a:link a:visited, etc seem to be their own class :/ Thanks in advance!

Upvotes: 0

Views: 468

Answers (5)

mreq
mreq

Reputation: 6542

just use the parent selector, wrap the links you want to edit without changing any else in a wrapper

html

<div id="header"><a href="">styled link</a></div>
<a href="">not styled link</a>

css

#header a, #header a:active, #header a:link, #header a:visited { color: white }
#header a:hover { color: blue }

also note that the latest versions of firefox & chrome doesn't support :visited pseudoclass due to security issues

Upvotes: 3

icktoofay
icktoofay

Reputation: 129001

CSS selectors have multiple parts, separated by spaces. Each of these parts selects from children (or children of children, and so on) of the previous part, or the whole page if it's the last one. (this behavior changes if there's things like > in there, but that's not relevant for this question)

Each of those parts can have multiple things that it uses to filter. For example, you mentioned a:link. This is two parts: a, which filters it to a tags, and :link, which filters it to links. If you put this together, it says "a tags which are links".

If you use this with the ID selector (#id), you can make something like #header a:link, which will only target a tags which are links in elements which have an id of header.

Upvotes: 0

Gio Borje
Gio Borje

Reputation: 21114

You want to use specificity within CSS. This can be done multiple ways.

Method 1: Classes

First, add a similar class to all navigation links e.g. <a href="#" class="classname"></a>

Second, in the CSS, add 

a.classname:link {} 
a.classname:visited {} 
/* etc */

Method 2: Container

First, group all of the navigation links within a tag known as a container e.g.

<div id="idname">
<a href="#"></a>
<a href="#"></a>
</div>

Second, in the CSS

#idname a:link {}
#idname a:visited{}
/* etc */

Upvotes: 0

Ed Heal
Ed Heal

Reputation: 60007

<div class="firstbit">
   <a href=......

</div>

then

.firstbit a,
.firstbit a:hover
{
   Style stuff here
}

Then do the same but change the name of the class

Upvotes: 2

rgin
rgin

Reputation: 2311

html:

<a class='fancylink'>Hi</a>
<a>No Fancy Link</a>

css:

.fancylink{
    color:blue;
    text-decoration:none;
}

.fancylink:hover{
    color:yellow;
}

It's not much of a design but it answers your question. =)

Upvotes: 2

Related Questions