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 :/

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

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/j9b7mhLp/1/

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

• javascript
• html
• css

• Why can't you use #form button ? – Dana Commented Apr 28, 2017 at 7:34
• take a look at stackoverflow./questions/4910077/… – Timothy Groote Commented Apr 28, 2017 at 7:35
• 1 these code are working #form>button {} .c > button {} refer the fiddle – prasanth Commented Apr 28, 2017 at 7:35

8 Answers 8

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

Your approach is too vague. Just place an ID on the element and select it that way.

Descendant selectors use (simply) form button (as opposed to form > button)

Try This

#id > button:nth-of-type(1) {/*place your css here*/}
#id > button:nth-of-type(2) {/*place your css here*/}

I assume you have more buttons in the same form, like this:

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

Can you add a specific class for that divs?

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

The you can use this css code:

#id > .test.specific { //whatever }

this seems to working for me. Please check if your custom css is overriding this.

#One > form > button {
  color: red;
  background: purple;
}

#Two > form > button {
  color: red;
  background: purple;
}

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

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

You can use like this

 .test {  }
 .test:first-child {  }

Please refer this link : First and nth Child

#form button {
//your css here
}

buttons are inside form , you can select them like this.

You have syntax errors, please fix them. You shouldn't use spaces when defining attributes in HTML. In this case ids and classes.

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

Now, to select buttons in this exact example there are several ways. If only they have a class 'test' then you can simply select them with the class selector:

.test {}

If not, you can do it this way as well:

form#id > button {}

Or, to have more proper targeting depending on the class:

form#id > .test

Even this will work if you want to select only two buttons and not others in the form:

form#id > button:first-child, form#id > button:nth-child(2) {}

However, your issue was with the syntax HTML errors.