How to Change the Style of Elements with Same Class Name

How to change the style of elements with same class name

document.getElementsByClassName: returns a set of elements which have all the given class names.

You may have multiple elements with this class name. so you need to provide index like

document.getElementsByClassName('s')[0].style.display='block';

Inorder to apply for style for all elements with same class name:

var ele = document.getElementsByClassName('s');
for (var i = 0; i < ele.length; i++ ) {
    ele[i].style.display = "block";
}

Change the style of multiple elements with the same class

var el = document.querySelectorAll('#site-nav__link-id');

for (var i = 0; i < el.length; i++) {
    var currentEl = el[i];
    currentEl.style.color = 'white';
}

You need to use querySelectorAll for getting multiple elements with same id.

How to style nested divs with same class name?

The trick is that you cannot style the container, but you need to style the folders within them. Otherwise you will put background on background, and this way you can only make them more opague. With
the way I wrote it down here you can make them more transparent.

.Folder-container > .folder
{
   background-color: rgba(0,0,0,1);
}

.Folder-container > .Folder-container > .folder
{
   background-color: rgba(0,0,0,.8);
}

.Folder-container > .Folder-container > .Folder-container > .folder
{
   background-color: rgba(255,255,255,.6);
} 

.Folder-container > .Folder-container > .Folder-container > .Folder_Container > .folder
{
   background-color: rgba(255,255,255,.4);
}

Changing CSS of elements of the same class onmouseover, depending on each element's id

The easiest way would be to avoid using an id, and instead use a CSS custom-property, for example --hoverColor:

/*
  The default styling for the element(s):
*/
.p-class {
  color: #000;
  background-color: silver;
}

/*
  The styles for the :hover pseudo-class/interaction:
*/
.p-class:hover {
  /* the var() retrieves the named custom-property from
     the closest ancestor element upon which it's defined.
     Here this is specified in the inline 'style'
     attribute for the .p-class elements: */
  color: var(--hoverColor);
}

<p class="p-class" style="--hoverColor: #000">Hi</p>
<p class="p-class" style="--hoverColor: #FFF">Hi</p>
<p class="p-class" style="--hoverColor: #FFFF66">Hi</p>
<p class="p-class" style="--hoverColor: #498F83">Hi</p>

Changing multiple elements' styles with a same class name at once with JavaScript?

The DOM methods that getElementsBySomething (plural), as opposed to ones which getElementBySomething return a NodeList, not an element. NodeLists are Array-like objects.

You have to loop over it and change each element in turn if you take that approach. Most libraries have shortcut methods to do that for you.

e.g. for YUI 3:

Y.all('.foo').setStyle('background', '#f00');

or jQuery

jQuery('.foo').css('background', '#f00');

An alternative approach would be to modify the stylesheet itself with JavaScript.

A third option would be to set up your changed styles in advance, using a descendent selector such as:

.foo { /* something */ }
body.bar .foo { /* something else */ }

And then

document.body.className += " bar";

to activate the alternative 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

---

Related Topics