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>
MPelletier
  • 16,256
  • 15
  • 86
  • 137
Jacob Anthony Tonna
  • 515
  • 3
  • 13
  • 27
  • i feel like such an idiot for asking this D: – Jacob Anthony Tonna Jan 20 '13 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 '13 at 11:37

2 Answers2

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; }
diggersworld
  • 12,770
  • 24
  • 84
  • 119
  • Correct, `1` is not a valid class name. [This answer](http://stackoverflow.com/a/449000/1321716) explains it more in depth. – Mattias Buelens Jan 20 '13 at 11:28
  • @diggersworld i updated the script now all links on the page are invisable except the header – Jacob Anthony Tonna Jan 20 '13 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. – diggersworld Jan 20 '13 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. – Mattias Buelens Jan 20 '13 at 11:32
  • Cheers Mattias, I'll add that to the answer so it stands out better. – diggersworld Jan 20 '13 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

JanivZ
  • 2,265
  • 3
  • 25
  • 31