Select elements inside a specific container (div or form)
I know by doing element>elements
, we can use a CSS selector to select everything elements
inside the parent element
.
Buy if there are multiple containers of element
the same type and we only want to select items in a specific parent element
, is there a way to do this?
I tried #elementID>elements
and .elementClass>elements
but didn't work.
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 does not work: #id > button{}
, .class >button
, #form >button{}
,.c >button{}
If I execute div > button{}
it works, but I have a few more div containers with elements button
and I want them to have different CSS effects.
The whole picture is here : https://jsfiddle.net/j9b7mhLp/1/
Specifically, I am targeting the "register" and "cancel" two buttons in a modal mode.
Your approach is too vague. Just put the id on the element and select it that way.
Descendant selectors use (just) form button
(as opposed to form > button
)
If you want to change buttons using JavaScript, here's a look at the following code:
var buts = document.forms["form"].querySelectorAll("button");
buts[0].style.background="green";
buts[1].style.background="blue";
live demo
try it
#id > button:nth-of-type(1) {/*place your css here*/}
#id > button:nth-of-type(2) {/*place your css here*/}
You can use this like
.test { }
.test:first-child { }
Please refer to this link: First and nth child
I assume you have more buttons in the same form, for example:
<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 these 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>
You can use this css code:
#id > .test.specific { //whatever }
this seems to work for me. Please check if your custom css overrides.
#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>
#form button {
//your css here
}
are inside the 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, there are several ways to select buttons in this exact example. If only they have a class test, you can simply select them using a class selector:
.test {}
If not, you can do it like this:
form#id > button {}
Or, to have more correct targeting depending on the class:
form#id > .test
Even this will work if you only want to select two buttons and not the others in the form:
form#id > button:first-child, form#id > button:nth-child(2) {}
However, your problem is with HTML syntax errors.