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!

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

What is # symbol at beginning of name 2

Status
Not open for further replies.

ksbigfoot

Programmer
Apr 15, 2002
856
0
0
CA
I inherited some code and the cascading style sheets have a #MyList {...} in it
Plus #MyList a {...}
Plus #MyList a:hover, #MyList a:link, #MyList a:visited {...}

I have searched for the # character, but I can't find anything. Can someone point me in the right direction.

Second part of my question is how can I override the a and a:visited?

Thanks
 
# character indicates the style will be applied to an object with an ID of MyList.

Its basic CSS construction. "#" means ID
"." means class

So #MyList would be applied to anything that had an ID of Mylist.

example: <div id="MyList" ...>

ID's should only be used once as the identify a single object.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
The # means the following string represents the id of an element (somewhere on a page). It allows you to "namespace" your CSS - specify styles more accurately. It's like the . refers to CSS classes.

Check out w3schools section called "The id selector".

Your second question can be answered several ways. It might be best to see the css you are using before getting the right answer, however. Normally I might define some anchor styles like this:
Code:
...
a { text-decoration: underline; color: black; }
a:hover { color: gold; }

#MyList a { color: red; }
#MyList a:hover { color: white; }
...
All anchors on the page will be underlined and black - except for anchors that appear as descendants (children) of the element with an id of "MyList" which appear red instead of black.

When you hover over any anchor on the page, the colour changes to gold - except for anchors that appear as descendants (children) of the element with an id of "MyList" which appear white instead of gold.

The "low secificity" style definitions on the first 2 lines above, define some "default" styles for all anchors on the page. The styles with #MyList before them have "higher specificity" than the previous style definitions and apply only to descendants (children) of the element with an id of "MyList".

Check out specificity (and try to say it 5 times quickly).

CSS Specificity article
Easy to read article on specificity
CSS Specificity Wars (alternative explanation

And...
A CSS specificity calculator

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Howdy vacunita & BabyJeffy,

Thanks so much for the posts, it makes more sense now.
For some reason my browser at work won't let me give you stars, so I will make sure I do it tonight when I get home.

Thanks again,
ksbigfoot
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top