Class and links

[tfstom]

Do I need to have a class definition if I am just using it for links?

For example, I have the following class - MenuLinks - that I want to use in my menu. This is the only place I am going to use it. I set up the following:

.MenuLinks a:link:visited
{
font-family: Arial, Helvetica, sans-serif;
color: white;
font-size: xx-small;
text-decoration: none;
}

Do I also have to have the following?

.MenuLinks
{
font-family: Arial, Helvetica, sans-serif;
color: Blue;
font-size: xx-small;
decoration: none;
}

Thanks,

Tom

 

[BillyRayPreachersSon]

No - if you're only using the menuLink class for links, then there is effectievly no difference between ".MenuLinks" and ".MenuLinks a".

Hope this helps,
Dan

 

[Vragabond]

What exactly does your html look like. The first example describes the behaviour of every link inside any element with a class .MenuLinks. That means you have to have a container with a class .MenuLinks in which your links will behave as described. Your second example would then define the looks of that container. However, I admit I haven't seen the syntax

.MenuLinks a:link:visited

but I checked it on SelectORacle and it said:

Selects any a element whose target has not been visited and whose target has been visited that is a descendant of any element with a class attribute that contains the word MenuLinks.

I gather that situation will never occur, since there is no state where link can be visited and not visited at the same time. Maybe you should use:

.MenuLinks a:link,
.MenuLinks a:visited
{
...
}

The comma works as an OR selector.

 

[tfstom]

I am just adding the class to my table tags or <td> tags and it seems to work fine.

Was just curious if I needed to also add the class field by itself as well as the class and the pseudo classes (a:visited).

a:visited:link

would be the same as

a:visited,
a:link

Thanks,

Tom.

 

[Vragabond]

No, you do not need to specify behaviour for your .MenuLinks class if you want to only describe behaviour of its descendants. You would have to do that if you would want the text inside <td> to behave exactly the same as the links inside that <td>.

To further explore the pseudo classes. Your syntax still selects elements that are both not visited and visited at the same time. In other words, such elements don't exist. However, since the CSS2 selectors are not properly supported in IE, it seem to render the page as you would expect it. Mozilla however, completely ignores your style definition, because it supports this kind of syntax. Since this will become a common syntax in the future, I suggest you rectify it. Also, using

a:visited,
a:link

is invalid, because pseudo classes must follow in specific order for them to work. The correct order is:

a:link
a:visited
(a:focus)
a:hover
a:active

Hope it helps, even if it is not direct answer to your question.

 

[tfstom]

It does help. I got the a:link:visited syntax from another source that said this works fine.

The deal was that if the 2 selectors are going to be treated the same for one or more properties, you can use this syntax.

All I am trying to do is make sure that the Link items in our menu on the left side of our pages are always the same color (white - since the background is blue).

Not sure why there would be an order for these pseudo classes. What difference does it make whether a:link is defined before a:visited? They are different things. I would assume that a link that hasn't been visited would always use the a:link selector and the if a link has been visited, it would use the a:visited selector - regardless of what order they were in. I could be wrong here, but I can't figure out a reason why that would matter.

Thanks,

Tom.

 

[ChrisHunt]

The order of pseudo classes doesn't matter if you're giving them all the same properties:

a:active,
a:hover,
a:visited,
a:link {
   color:blue;
}

Where the order comes into play is where you're looking to apply different rules to different classes:

a:hover {
   color: red;
}
a:link,a:visited {
   color: blue;
}

The above code is perfectly valid, it just won't do what you might expect it to do - it won't make links turn red when hovered over.

The reason is the way browsers pick which rule(s) to apply. A link is always subject to either :link or :visited pseudo-classes, if you hover over it it's subject to :hover as well (and if you click it you get :active too). How does the browser decide whether to apply the :link rule or the :hover rule if both apply (and conflict)? Simple - the most recent one takes precedence. So in the above example the :link/:visited rule will always override the :hover, causing the latter to be ignored. Seasoned veterans know to declare their rules in the order stated by Vragabond to get them to work as intended.

You should also remember the "cascading" nature of CSS:

a:link,a:visited {
   color: blue;
   font-weight: bold;
}
a:hover {
   color: red;
}

This time the hover behavior will work as intended, and links will be in bold type. The boldness does not disappear when hovering, because both rules apply - the browser only has to choose between them for properties that conflict, the :hover rule says nothing about font-weight, so the value from the other applicable rule will be applied.

Hope this all makes some sense


-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk