Need help with CSS and styling a links

[whunter]

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.

[doc_guy]

Can you paste the offending CSS in this thread so we can take a look?

[whunter]

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;
}

[kydeck]

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:

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;
}

Should look like:

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;
}

This will give your 'a' selectors the proper specificity.

[whunter]

That was it! Thank you so much!