Clever Geek Handbook

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.

+3


source to share


8 answers


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

)

0


source


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

+2


source


try it

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


source


You can use this like

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

Please refer to this link: First and nth child

+1


source


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 }
+1


source


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>
Run codeHide result


+1


source 


#form button {
//your css here
}
Buttons

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

0


source


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.

0


source






More articles:


All Articles