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.

take a look at http://stackoverflow.com/questions/4910077/select-all-child-elements-recursively-in-css — Timothy Groote, Apr 28 '17 at 07:35
these code are working `#form>button {} .c > button {}` refer the [fiddle](https://jsfiddle.net/j9b7mhLp/) — prasanth, Apr 28 '17 at 07:35

score 2 · Answer 1 · answered Apr 28 '17 at 07:49

2

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

answered Apr 28 '17 at 07:49

slevy1

3,797
2
27
33

1

Oh God.. why would anyone do it this way? :) – tholo Apr 28 '17 at 07:50

score 1 · Answer 2 · answered Apr 28 '17 at 07:39

1

Try This

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

answered Apr 28 '17 at 07:39

Sunil Singh Rawat

96
4

score 1 · Answer 3 · edited May 23 '17 at 12:10

1

You can use like this

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

Please refer this link : First and nth Child

edited May 23 '17 at 12:10

Community

1
1

answered Apr 28 '17 at 07:42

Bachcha Singh

3,850
3
24
38

score 1 · Answer 4 · answered Apr 28 '17 at 07:44

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 }

score 1 · Answer 5 · answered Apr 28 '17 at 07:45

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>

score 1 · Accepted Answer · answered Apr 28 '17 at 07:54

1

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)

answered Apr 28 '17 at 07:54

ihodonald

745
1
12
27

score 0 · Answer 7 · answered Apr 28 '17 at 07:35

0

#form button {
//your css here
}

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

answered Apr 28 '17 at 07:35

RemyaJ

5,358
4
22
41

tholo · Answer 8 · 2017-04-28T07:52:54.547

0

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.

edited Apr 28 '17 at 07:52

answered Apr 28 '17 at 07:37

tholo

511
3
8
19

what do you mean HTML errors? the HTML is fine. it could be neater, but there aren't any syntax errors there. – Timothy Groote Apr 28 '17 at 07:41
He /she has spacing in class and id defining. Not every browser ignores that and I do not know which one is he/she using. – tholo Apr 28 '17 at 07:42
there aren't any spaces in the class names or ID names. white space is mostly insignificant in html. – Timothy Groote Apr 28 '17 at 07:44
The only place in fact in OP's question where white space matters is in the CSS (`form#id > button {}` vs `form#id>button {}`) – Timothy Groote Apr 28 '17 at 07:45
That is false. There is space in defining the class, check the OP's question again. I'm now testing on IE and it is not rendering, that's why I posted it. – tholo Apr 28 '17 at 07:48
you mean `class = "class"` as opposed to `class="class"` ? – Timothy Groote Apr 28 '17 at 07:49
The white space in the CSS is significant. in fact, it will stay there unless you use an optimiser that is not up to spec. (see http://stackoverflow.com/questions/4910077/select-all-child-elements-recursively-in-css). i also have no idea which version of IE is causing problems, but i can tell you it's not anything above IE8. (barring misery with quirks mode) – Timothy Groote Apr 28 '17 at 07:54
White space in CSS IS significant, but that never was the issue here, was it? :) – tholo Apr 28 '17 at 07:55
concerning OP's question and your remark, it was ;) i still can't get IE to misbehave when messing with the spacing tho. :\ everything above 8 just fixes it by itself. – Timothy Groote Apr 28 '17 at 07:57
No it doesn't. Even the developers' tools are giving the error in the log. I do not see how it was, since I've posted the CSS with the white spaces.. :) – tholo Apr 28 '17 at 08:00

Select elements inside a specific container (div or form)

8 Answers8