View Full Version : 6 Headlines in a PHP list, each with their own shade of color?

05-31-2010, 05:42 PM
Hi. I have a list of 6 headlines on home.php that links to another page on my site. Is there anyway I could display the 6 headlines is different shades of gray? Meaning the newest headline on top in almost pure white, the second newest in a light gray, and so on to a dark gray on the last headline? Would be great if I could just pick 6 shades of gray and assign them to their own line.

<div class="content-headlines">
<?php query_posts('showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a><br />
<?php endwhile;?>

Thank you for your help! Have a nice day.

06-01-2010, 08:55 AM
s there anyway I could display the 6 headlines is different shades of gray? Could you please show us the generated html of the above code or a link to your page?

06-01-2010, 02:28 PM
Sure! Here you have the generated HTML.

<div class="content-headlines">
<a href="http://xxxxxx/blog/?p=11" rel="bookmark" title="Permanent Link to Tropical Gangsta @ This is a Test">Tropical Gangsta @ This is a Test</a><br />
<a href="http://xxxxxx/blog/?p=9" rel="bookmark" title="Permanent Link to Master Collection 2010">Master Collection 2010</a><br />
<a href="http://xxxxxx/blog/?p=7" rel="bookmark" title="Permanent Link to Who let the dogz out?">Who let the dogz out?</a><br />
<a href="http://xxxxxx/blog/?p=6" rel="bookmark" title="Permanent Link to Amazonian Dreams New this Week!">Amazonian Dreams New this Week!</a><br />
<a href="http://xxxxxx/blog/?p=5" rel="bookmark" title="Permanent Link to Thunder Storm Whoop Whoop">Thunder Storm Whoop Whoop</a><br />
<a href="http://xxxxxx/blog/?p=3" rel="bookmark" title="Permanent Link to Another Headline Test Hello Hello">Another Headline Test Hello Hello</a><br />

Thank you for taking your time!

I also had another question related to where the headlines link to over in PHP: http://www.codingforums.com/showthread.php?p=960293#post960293 If you have a cluel. Thanks again.

06-01-2010, 04:06 PM
For modern browsers, you could use something like

div.content-headlines :nth-child(1){
div.content-headlines :nth-child(3){
div.content-headlines :nth-child(5){
div.content-headlines :nth-child(7){
div.content-headlines :nth-child(9){
div.content-headlines :nth-child(11){
(See http://reference.sitepoint.com/css/pseudoclass-nthchild)
Or try to add a sequence of class attributes in loop, like title1,title2,...title6 and then use simple class selectors of CSS.

06-01-2010, 08:48 PM
That seems to work! Thank you so much for this. Have a nice day.