targeting all elements in a div

Question

right now i have this

$(".container a").css("color","#ffffff");

which styles all links inside ".container" white. then i have a div structured like this

<div class="container">
  <div class="header">
    <a href=">
  </div>
</div>

the links inside that second div only turn white in Firefox. Is there a way to fix the line of js without adding another line for the header div? Something that selects all the children?

Answer 1

EDIT:

my mistake, this could be a CSS issue.

EDIT 2:

do this.

put your js code just before the end of the </body> tag or any where after the calling of the module. I am assuming that you put your styling script in your header. Since firefox loads everything in hierarchal situation including the script, the script already performs the styling before the module is loaded to the DOM. So if you put the styling script at the end of the DOM, the module is already loaded before it performs the styling script.

Answer 2

It's a descendant and that should be enough. As meder mentioned it's probably a specificity issue. You could add !important or another selector .container a, .container .header a. There's probably a better way than all of those but without seeing more that's all to suggest for now.

Answer 3

Try fixing the html code first by closing all the tags and quotes.

<div class="container">
  <div class="header">
    <a href="#">Link</a>
  </div>
</div>

Also, make sure that you have your code execute after the page loads.