How to change colour of an element nested in other elements using javascript

Question

I have a list structured as such:

<ul class="list">
    <li class="list-element ">
        <a href="#"><a>
    </li>
</ul>
<button onclick="changeColour()"></button>
<script  src="js/index.js"></script>

The css for my links are:

ul li a {
          color: red
        {

How do I change the colour of my links?? I know you can do this:

function changeColour() {
  var div = document.getElementsByTagName("ul");
  div.style.changeColour = "rgb(0, 212, 177)";
}

but I don't know how to the links within list item within the list.

Answer 1

You can change it with css . Your css is correct but you missed ; after red . And you can do it with javascript too or you can use both if you want to give it a color then change it at run time. For your javascript code you forgot to add the collection's index...

document.getElementsByTagName('a')[0].style.color='orange';

NB: I'm targeting the first anchor with [0]. To target all anchors loop through the collection.

Like this

 function changeColour() { var div = document.getElementsByTagName("a"); for(var i = 0; i < div.length; i++){ div[i].style.color = "rgb(111, 112, 112)"; } } changeColour(); 

 ul li a { color: red; { 

 <ul class="list"> <li class="list-element "> <a href="#">link 1<a> </li> <li class="list-element "> <a href="#">link 2<a> </li> </ul> 

Answer 2

Try document.querySelectorAll :

 let links = document.querySelectorAll("ul.list li.list-element a"); for (let link of links) { link.style.color = "rgb(0, 212, 177)"; } 

 ul li a { color: red { 

 <ul class="list"> <li class="list-element"> <a href="">LINK 1</a> </li> <li class="list-element"> <a href="#">LINK 2</a> </li> </ul> 

Answer 3

HTML

<ul class="list">
    <li class="list-element ">
        <a href="#">link 1<a>
    </li>
    <li class="list-element ">
        <a href="#">link 2<a>
    </li>
</ul>

Script

$('.list').each(function(){
        $(this).find('li a').css('color','rgb(111, 112, 112)');
 });

Answer 4

Below is Jquery model in case you are looking for it

 // Jquery model if you want to use $(document).ready(function(){ $('#change').click(function(){ var color=["blue","red","yellow","black","pink","green"]; var prompts = prompt("please type your valid color"); // checking if entered colored is registered for(x in color){ if(color[x] ==prompts){ //registered then set its value as color $("a").css({"color":prompts}); return ; } } // deal with unregistered color var conf = confirm('not registered color entered , do you want to set the default color?'); if(conf ==true ){ $("a").css({"color":"black"}); } }); }); 

 ul li a { color: red; { 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li class="list-element "> <a href="#">link 1</a> </li> <li class="list-element "> <a href="#">link 2</a> </li> </ul> <p id='change'> please click here to change link color </p>