Select elements inside a specific container (div or form)

Question

I know by doing element>elements we can use CSS selector to select all elements inside the parent element.

Buy if there are a couple of containers element of same kind and we only want to select elements in a specific parent element, is there a way to do it?

I have tried #elementID>elements and .elementClass>elements but neither worked.

simplified code:

<div id="id" class = "class">
  <form id = "form" class = "c">
    <button class="test">foo</button>
    <button class="test">foo</button>
  </form>
</div>

CSS not working: #id > button{}, .class >button ,#form >button{},.c >button{}

If I do div > button{} it works but I have a couple more div containers with buttonelements in it and I want them to have different CSS effects.

The whole picture is here :https://jsfiddle.net/j9b7mhLp/1/

Specifically I am targeting the "sign up" and "cancel" two buttons in the modal.

Answer 1

If you're interested in changing the buttons with JavaScript, here's some code to consider:

var buts = document.forms["form"].querySelectorAll("button");
buts[0].style.background="green";
buts[1].style.background="blue";

live demo