Как сделать разный margin в зависимости от условия (только CSS)?

Question

[Nettchen]

Дано: 2 меню. В первом - 4 пункта. Во втором - 8 пунктов.

Как с помощью CSS сделать так, чтобы
когда в меню 4 пункта = отступ между ними был 30px,
а когда становится более 4-х пунктов = отступ между ними становился 10px?

Нужно сделать на чистом CSS. В разметку вносить изменения нельзя. Стилизовать каждое меню по отдельности тоже нельзя. Необходимо, чтобы отступ увеличивался автоматически, при увеличении числа пунктов. Может быть здесь нужно использовать что-то из этого :nth-child() / ~ / calc() ?

Вопрос заключается в том, можно ли вообще такое сделать на чистом CSS?

<div class="two-menu">
		<nav>
			<ul class="menu">
				<li><a href="#">Первый</a></li>
				<li><a href="#">Второй</a></li>
				<li><a href="#">Третий</a></li>
				<li><a href="#">Четвёртый</a></li>
			</ul>
		</nav>
		<nav>
			<ul class="menu">
				<li><a href="#">Первый</a></li>
				<li><a href="#">Второй</a></li>
				<li><a href="#">Третий</a></li>
				<li><a href="#">Четвёртый</a></li>
				<li><a href="#">Пятый</a></li>
				<li><a href="#">Шестой</a></li>
				<li><a href="#">Седьмой</a></li>
				<li><a href="#">Восьмой</a></li>
			</ul>
		</nav>
	</div>

Comments

[black1277]

Ответ на ваш вопрос - да. Такое можно сделать на чистом CSS (используя nth-last-child). Даже можно больше условий добавить - больше восьми пунктов - отступ 5px.

Answer 1

[y0u]

• Для каждого меню добавить свой класс со своими отступами
  
• Если добавлять классы нельзя, можно попробовать написать селектор из того, что есть, для каждого меню отдельно
  

Comments

[Nettchen]

Да, ищу способ, при котором бы не требовалось вмешиваться в разметку. И нет, к сожалению, нельзя обращаться к каждому меню отдельно.

Нужно чтобы отступы изменялись автоматически, когда их становится больше 4-х. Может быть здесь с помощью calc() можно что-то сделать. Только я пока не могу понять что именно.

[y0u]

Nettchen,

нельзя обращаться к каждому меню отдельно

Почему нельзя? Разметку хоть скинули бы для приличия.

Answer 2

[Рей Достоевский]

Добавить каждому отдельный class или id.
В css уже обращаться к каждому по отдельности.
Если писать на css, - будет долго. Лучше используй JS или Python, уже до тебя должно было быть сделано)

Удачи! =)