0

I can't seem to figure out how to make this css script only select the 4 links for the header. It makes all my links on my webpage green. How do I do this? I tried 1.ul{ css here} and 1.a:link,1.a:visited; etc. And then onI addedclass='1'` but it still makes all links same as header links.

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a.a:link,a.a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a.a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul class"a">
<li><a class='a' href="#home">Home</a></li>
<li><a class='a' href="#news">News</a></li>
<li><a class='a' href="#contact">Contact</a></li>
<li><a class='a' href="#about">About</a></li>
</ul>
2
  • i feel like such an idiot for asking this D: Jan 20, 2013 at 11:24
  • Well adding the '1' doesn't change anything unless you add .1 before the stlye,anyway i think you can't add .1 and that you need to add some letters.Anyway the best way to group elements is with a div.
    – kingW3
    Jan 20, 2013 at 11:37

2 Answers 2

3

I'm not sure if its still the case but whenever I tried using numbers for classes it never worked unless there was a letter first. Either way numbers aren't very semantic. You should try and describe what the element contains when creating id and class attributes.

I'd do this:

<ul id="main-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

Then set CSS like this:

#main-menu a { color: green; }

As Mattias pointed out will need to specify #main-menu each time you target an anchor in the #main-menu list.

#main-menu a:link, 
#main-menu a:visited {
    color: green;
}

Which is equivalent to:

#main-menu a:link { color: green; }
#main-menu a:visited { color: green; }
5
  • Correct, 1 is not a valid class name. This answer explains it more in depth. Jan 20, 2013 at 11:28
  • @diggersworld i updated the script now all links on the page are invisable except the header Jan 20, 2013 at 11:28
  • well you must have some CSS that is making them invisible, the CSS above will not affect any anchor outside of the #main-menu list. Jan 20, 2013 at 11:32
  • 1
    @user1978141 #main-menu a:link,a:visited: This rule will apply to either #main-menu a:link or a:visited. You need to make this #main-menu a:link, #main-menu a:visited. Same with the #main-menu a:hover,a:active rule. Jan 20, 2013 at 11:32
  • Cheers Mattias, I'll add that to the answer so it stands out better. Jan 20, 2013 at 11:33
0

I changed your css as follows:

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:red; 
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:blue; 
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a:hover
{
background-color:#7A991A;
}

a:active
{
background-color:purple;  
}
</style>

and it seems to work.

Basically, i separated the rules for the different link states so you could have a different color for each state. Take a look at the rules on the right pane of this page : W3Schools

Tell me if it helped

1
  • i figured it out alredy ty for the post w3c schools is out dated as far as i know i just needed a header and didnt want to create one my self Jan 20, 2013 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.