Member Avatar for Member #321605

I have attempting a small navigation system to show each page in my photo albums. I am attempting block links (coloured backgrounds, which change when the mouse hovers over them).

The page I'm working on is:

I achieved the look I wanted with the 1-4 links at the top of the page, but unfortunately, the thumbnails were affected too. I have attempted adding a span class so that the only links affected were the 1-4 ones, but it hasn't worked.

My HTML code:

<span class="links">
<a href="/photos/other/2008-04-27/page01.php">1</a>
<a href="/photos/other/2008-04-27/page02.php">2</a>
<a href="/photos/other/2008-04-27/page03.php">3</a>
<a href="/photos/other/2008-04-27/page04.php">4</a>
</span>

My CSS Code:

span.links {
	a:link {
	color: #000000;
	background-color:#99ccfb;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}

	a:visited {
	color:#000000;
	background-color:#c0c0c0;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}

	a:hover {
	color:#FFFFFF;
	background-color:#b90dbe;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}
	}

Any thoughts on where I'm going wrong?

  • 3 Contributors
  • 3 Replies
  • 303 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #321605

Dani AI

Generated

The root cause was CSS syntax and selector choice, not the HTML. CSS does not support nesting rules like putting a:link { ... } inside span.links { ... } (that only works in preprocessors). That meant the browser ignored those rules, and any other generic link rules on the page continued to style the thumbnails. Also watch for missing units (e.g., padding: 5 is invalid — use 5px) and stray braces or order problems that can silently break a stylesheet.

A simple, robust fix is to give the navigation anchors their own class (or a container + direct-child selector) and style that class. Using an anchor-level class avoids accidentally styling other links and makes the rules easier to maintain. Keep pseudo-classes in the correct order (LVHA: :link, :visited, :hover, :active) and include :focus for keyboard accessibility.

Example approach (add class="pageLink" to each link and style that class):

<a class="pageLink" href="...">1</a>
<a class="pageLink" href="...">2</a>
.pageLink {
  display: inline-block;
  padding: 5px 8px;
  margin-right: 6px;
  color: #000000;
  background: #99ccfb;
  border: 1px solid #000000;
  text-decoration: none;
  box-sizing: border-box;
}

.pageLink:visited { color: #000000; background: #c0c0c0; }

.pageLink:hover,
.pageLink:focus {
  color: #ffffff;
  background: #b90dbe;
  outline: 2px solid #b90dbe; /* visible focus for keyboard users */
}

Troubleshooting checklist: inspect the element with the browser dev tools to see which rule is winning, validate the CSS for stray braces or missing semicolons, and confirm the anchors you want styled actually have the class (or are direct children if using >) so thumbnails remain unaffected. Credit to for the class suggestion and for pointing toward a scoped selector — combining those ideas is the cleanest solution.

Recommended Answers

All 3 Replies

Member Avatar for SteveKubrick

What you need to do is create your own class to use on the links you want to change.

You can create a new class by defining it in the CSS using a . for example:

.cheese {}

You can then assign the class to the link using class="cheese" when you create the link.

All the attributes you define in that class will carry over to the link.

To change the links in class cheese define it like this:

.cheese a:hover{whatever you like}

Hope that helps. :)

Member Avatar for rudevils

Try it like this Borderline

.links a:link  {
	color: #000000;
	background-color:#99ccfb;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;
}

.links a:visited {
	color:#000000;
	background-color:#c0c0c0;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;
}

.links a:hover {
	color:#FFFFFF;
	background-color:#b90dbe;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}
}
Member Avatar for Member #321605

Many thanks, problem solved!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.