In my stylesheet I have the base a, a:link, etc. classes. Then I have complex selectors of div.pagetoc a, a:link, etc. to style the links a certain way when they are within this div, because the div has a background color so the links need to be white and so on.
My problem is that all links are taking on the styles defined for div.pagetoc instead of using the base a styles. When I inspect them in the browser, the applied style is from div.pagetoc even though the links aren't within that div. I have made sure that the a classes are listed in the right order. I feel like I must be missing something obvious. I know I have set up things like this in the past and it worked. FWIW, the div.pagetoc stuff is floated to the right and there is also a script that populates some links within the div, so not sure if that plays into it. Also this is using the new Side Nav skin.
Any assistance to point me in the right direction would be much appreciated.
Need help with CSS and styling a links
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Need help with CSS and styling a links
Can you paste the offending CSS in this thread so we can take a look?
Re: Need help with CSS and styling a links
Code: Select all
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active
{
color: #5B8EC1;
text-decoration: none;
font-weight: normal;
}
a:hover
{
text-decoration: underline;
}
div.pagetoc a:link,
a:visited,
a:hover,
a:focus,
a:active
{
color: white;
text-decoration: none;
font-weight: normal;
display: block;
padding: 6px 22px;
}
div.pagetoc a:hover
{
background: #004e7d;
text-decoration: none;
color: white;
}
Re: Need help with CSS and styling a links
When using multiple selectors separated by a comma, you have to write the entire selector as if you would if they were part of their own styles, so from what I can tell...
This:
Should look like:
This will give your 'a' selectors the proper specificity.
This:
Code: Select all
div.pagetoc a:link,
a:visited,
a:hover,
a:focus,
a:active
{
color: white;
text-decoration: none;
font-weight: normal;
display: block;
padding: 6px 22px;
}
Code: Select all
div.pagetoc a,
div.pagetoc a:link,
div.pagetoc a:visited,
div.pagetoc a:hover,
div.pagetoc a:focus,
div.pagetoc a:active
{
color: white;
text-decoration: none;
font-weight: normal;
display: block;
padding: 6px 22px;
}
Re: Need help with CSS and styling a links
That was it! Thank you so much!