iori
iori

Reputation: 3506

How to force set all the text-color of my `<a>` to be different ?

Details

What I have tried

<ul id="sticky" class="sticklr">
    <?php foreach(array_unique(array_values($continent)) as $continent_id){
        if($continent_id == 1 ){ $continent_name = "Europe" ; $continent_code = "EU" ;  
        }elseif ($continent_id == 2 ){ $continent_name = "Asia" ; $continent_code = "AS" ;    
        }elseif ($continent_id == 3 ){ $continent_name = "North America" ; $continent_code = "NA" ;    
        }elseif ($continent_id == 4 ){ $continent_name = "Oceania" ; $continent_code = "OC" ;   
        }elseif ($continent_id == 5 ){ $continent_name = "South America" ; $continent_code = "SA" ;   
        }else{  $continent_name = "Africa" ; $continent_code = "AF" ; }  ?>
        <li>
            <a href="#<?php echo $continent_name ?>" class="sticky-<?php echo $continent_code ?>">
            <?php echo $continent_name ?> | <?php echo $continent_code ?>
            </a>
        </li>
        <?php }?>
    </ul>

CSS

.sticklr > li > a .sticky-AS{

    color: orange !important;
    text-decoration: none !important;
}
.sticklr > li > a .sticky-EU{

    color: #50c0de !important;
    text-decoration: none !important;
}
.sticklr > li > a .sticky-NA{

    color: red !important;
    text-decoration: none !important;
}
.sticklr > li > a .sticky-OC{

    color: #428bca !important;
    text-decoration: none !important;
}
.sticklr > li > a .sticky-SA{

    color: #5cb85c !important;
    text-decoration: none !important;
}
.sticklr > li > a .sticky-AF{

    color: silver !important;
    text-decoration: none !important;
}

Result

enter image description here

Upvotes: 0

Views: 40

Answers (2)

user4287698
user4287698

Reputation:

Take .sticklr > li > a , it should work.

Demo

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15961

remove space a .sticky-AS should be a.sticky-AS

.sticklr > li > a.sticky-AS {....}

Upvotes: 0

Related Questions