Как посчитать количество элементов в Div и вывесть их количетсво в в Css

[ethereal]

Есть такой вот список:

<div class="owl-dots-slider">
  <button role="button" class="owl-dot active"><span></span></button> 
  <button role="button" class="owl-dot"><span></span></button>
  <button role="button" class="owl-dot"><span></span></button>
</div>

Как посчитать количество "button" в div, и вывесть их в ФАЙЛ CSS вот так:

width: calc(200px / button-count);

Спасибо!

[Malleys]

role="button"

У кнопки так и так по умолчанию такая роль, вы можете в данном случае пропустить такой атрибут!

Как посчитать количество "button" в div

Если это вам нужно, чтобы равномерно распределить элементы на 200 пикселей, то вы можете использовать flex: 1; на кнопках и display: flex; на родительском элементе.

<div class="owl-dots-slider">
  <button class="owl-dot active"><span></span></button> 
  <button class="owl-dot"><span></span></button>
  <button class="owl-dot"><span></span></button>
</div>

<style>
.owl-dots-slider {
	width: 200px;
	display: flex;
}

.owl-dot {
	all: unset;
	flex: 1;
	text-align: center;
	border: 1px dashed #ddd; /* для примера, чтобы было видно границы элемента, вы можете удалить эту строчку! */
}

.owl-dot::before {
	content: "●";
	color: deeppink;
}
</style>

[MC-XOBAHCK]

var dots = document.querySelectorAll('.owl-dots-slider button');
dots.forEach(function(dot) {
    dot.style.width = 'calc(200px /' + dots.length + ')';
});