How to add 55 width to everysingle object in a class

Question

I was wondering how I can have a <div class = "holder"> ALL THE 200 OBJECTS</div> and everything in there add 55px to.

Here is code that i have tried but failed.

$("#holder").width($("#holder").width() + 45);  

Any suggestions, thanks!

Answer 1

If you want every child of the holder div to have a width of 55px, you can do this with pure CSS, using the star selector.

.holder * {
  width:55px;
}

However be careful, the star selector is not the best. See this SO answer for more information about that: (why) is the CSS star selector considered harmful?

Depending on your child elements, you could target specific child tags. For example:

.holder .icon,
.holder .avatar {
  width:55px;
}

or only direct children:

.holder > .icon,
.holder > .avatar {
  width:55px;
}

Answer 2

If you're looking to make everything uniformly 55px in width, then I'd go with the CSS solution that has already proposed, however, if you are looking to add 55px to every element of the holder class (as your question seems to indicate, as well as your JS), then you just need to modify your JS a bit:

$('.holder').each(function() {
  $(this).width($(this).width() + 55);
});

Answer 3

$('div#holder *').css("width", "+=55px");

or

$('div#holder *').width($('div#holder *').width() + 55);

both works.

Where div#holder is the father of elements.

---

Remember:

# = id

. = class

If you're working with class, then the code would be div.holder instead div#holder.