Member Avatar for Member #321605

Evening

I've been experiencing problems while trying to give my two menus different attributes - could anyone advise the correct method I need for this, please?

The menu works as I want it, but I'd like to have any link in the content box displayed in a different colour.

CSS

/*------  ELEMENTS AND TAGS  ------*/

a:link {
	color: white;
	text-decoration:none;
}

a:visited {
	color: silver;
	text-decoration:none;
}

a:hover {
	color:silver;
	text-decoration:bold;
}

div#content p {
	clear: left;
	color: #000000;
	text-align: justify;
	}

		a.content:link {
			color: blue;
			text-decoration:none;
		}

		a.content:visited {
			color: purple;
			text-decoration:none;
		}

		a.content:hover {
			color:red;
			text-decoration:bold;
		}

PAGE:

<div id="content">
	<h2>Overview of Jackpot Previews</h2>

	<p>	
	Our resident columnist Pip, from Lodgehill Stables, selects three races a night to preview.  As soon as racing
	begins, we hope to bring this popular feature back to your screens!
	</p>

</div>

<div id="content">
	<h2>Latest Previews</h2>

	<p>	
	<a class="content">

			   <?php  
				// Connects to your Database  
				mysql_connect("******", "******", "******") or die(mysql_error());  
				mysql_select_db("******") or die(mysql_error());  
			$data = mysql_query("SELECT * FROM `race` WHERE `month`='sep08' OR `month`='nov08'
			ORDER BY `id`") or die(mysql_error());  
		?>
		<table cellpadding="2" width="95%">
		  <tr>
			<th align='left'>Date</th>
			<th align='left'>Race 1</th>
			<th align='left'>Race 2</th>
			<th align='left'>Race 3</th>
			<th align='left'>Previewer</th>
		  </tr>
		<?php
		while($info = mysql_fetch_array($data)) {  
		?>
		  <tr> 
		<td>
			  <a href="<?php echo $info['link']; ?>">
				<?php echo $info['date']; ?>
			  </a>
			</td>
			<td><?php echo $info['race1']; ?></td>
			<td><?php echo $info['race2']; ?></td>
			<td><?php echo $info['race3']; ?></td>
			<td><?php echo $info['previewer']; ?></td>
		  </tr>
		<?php
		}  
		?>
		</table> 

	</p></a>
</div>

Any help would be appreciated.

  • 2 Contributors
  • 2 Replies
  • 123 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Member #321605

Dani AI

Generated

A few practical fixes and clarifications that build on 's suggestion.

The reason the special colours didn't appear is markup + selector mismatch rather than CSS magic. The page uses the same id="content" twice and also has an outer <a class="content"> wrapping a table. IDs must be unique and that outer anchor won't affect the inner anchors created by PHP. Either give each content block a class (recommended when you reuse the same container) or add a class to the actual link elements you want to style.

Example restructuring (keep your PHP, but change the wrapper and target descendants):

<div class="content-area">
  <h2>Latest Previews</h2>
  <p>Intro text with <a href="...">a link</a>.</p>

  <table>
    <tr>
      <td><a class="preview-link" href="...">Date</a></td>
      ...
    </tr>
  </table>
</div>
/* Scoped rules that override the global link rule */
.content-area a { color: navy; text-decoration: none; }
.content-area a:visited { color: purple; }
.content-area a:hover,
.content-area a:focus { color: crimson; font-weight: bold; }

Quick notes and troubleshooting:

  • Use a class for repeated containers (ids must be unique) — see MDN: id attribute.
  • Pseudo-class order and specificity matter; target .content-area a (a descendant selector) to override a global a rule — see MDN: CSS Specificity.
  • text-decoration: bold is invalid; use font-weight: bold. Include :focus for keyboard users.
  • If many links are generated by PHP, styling the container is easier than adding classes to every anchor. Use browser devtools to inspect which CSS rule wins and adjust specificity if needed.

Recommended Answers

All 2 Replies

Member Avatar for DiGSGRL

start quote:

    a.content:link {
        color: blue;
        text-decoration:none;
    }

    a.content:visited {
        color: purple;
        text-decoration:none;
    }

    a.content:hover {
        color:red;
        text-decoration:bold;
    }

end quote.

You need to do:

#content a:link{
color:blue
}

That will change all link color inside of the content div

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Member #321605

Excellent, many thanks!

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.