Multiple HTML Div's Using Same CSS Style

Multiple html div's using same css style

That selector will apply to #container1,#container2, and any h5s in #container3. I think you want:

#container1 h5, 
#container2 h5, 
#container3 h5 {
  /* styling */
}

This is exactly what classes are intended for, however. If you add class="container" to each of your container divs, you can simply use the following rule:

.container h5 {
  /* styling */
}

styling multiple divs with same class name differently

.right:nth-child(1) {
        background: red;
 }
 .right:nth-child(2) {
        background: yellow;
 }
...

https://www.w3schools.com/CSSref/sel_nth-child.asp

using same css class from multiple pages

You can create a .myStyleForPage1 class for your @media all and (min-width: 800px) {...

But also you can create another class like myStyleMQ, and

page1: <div class="myStyle myStyleMQ">...</div>

page2: <div class="myStyle">...</div>

page3: <div class="myStyle">...</div>

Because you can have more than 1 class in an element.

HTML applying style to multiple div in CSS

Give the div a class. Use a class selector.

<div id="container-frame-{{ i }}" class="container-frame"

.container-frame {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}

---

You could also use an attribute selector.

[id^="container-frame-"] {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}

Applying same style to multiple child divs

Try this:

#id1 > div, #id2 > div  {
    border: 1px solid white;
    width: 100px;
    height: 50px;
    margin: 5px;
}

Multiple CSS selectors should be separated by a coma.

Applying Style to Multiple Div's in JavaScript

for...in iterates over enumerable properties in an object so it is not correct to use it in your case: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

querySelectorAll returns a NodeList, which has a handy forEach method:

boxes.forEach(box => box.style.backgroundColor = "lightblue");

How to apply in page style to different divs

Duplicate style declarations like that are going to end up in having one of them ignored. Also while class declarations can start with a number, you can't do that with IDs. Notice that I changed your outer div IDs from #1 to #outer1 and #2 to #outer2.

.outer{  width:100px;  height:100px;  background-color:blue;}.inner{  width:50px;  height:50px;  margin:10px;}

<style>#outer1 div.inner{background-color:red}</style><div id="outer1" class="outer">  content  <div class="inner">    more content  </div></div>
<style>#outer2 div.inner{background-color:green}</style><div id="outer2" class="outer">  content  <div class="inner">    more content  </div></div>

---

Related Topics