0

Есть цвета, до позиции nth-child(n+5) мы показываем их, после вставляем другой объект(квадрат с плюсом). А как, сделать посредстом CSS так, чтобы Если ровно 5 цветов всего - выводить все пять(без квадрата с плюсом), если больше, то пятый - квадрат с плюсом? и у блока есть определенные границы

#main{
    margin: 30px;
	max-width: 239px;
    max-height: 500px;
	border: 2px solid #1c4366;
	padding: 8px;
}

#main .color_box .radio {
    margin: 0 30px 16px 0;
    cursor: pointer;
}

.color_box {
    margin-top: 10px;
}

.products div[data-tovar_type] div.color_box .modals {
}

.color_box .add3 {
    margin: -1px 0 0 1px;
}

.blocks, img, iframe, .int, .btn, .btns, .btn_buy, .select, .label, .checkbox, .radio, .i, .i:before {
    display: inline-block;
    display: -moz-inline-block;
    vertical-align: top;
}

#main div.color_box .radio {}
#main  div.color_box .radio:nth-child(n+5) { visibility: hidden; position: absolute;} /*скрывать элементы с 5*/

#main  div.color_box .modals {}
#main  div.color_box .modals:nth-child(-n+5) { display: none; } /*модальное окно поялвется на 5ом*/

.add3:before {
    width: 7px;
    height: 1px;
    top: 9px;
    left: 6px;
}
.add3:after {
    width: 1px;
    height: 7px;
    top: 6px;
    left: 9px;
}
.add3:before, .add3:after {
    content: "";
    background: #cdcdcd;
    position: absolute;
}
.add3 {
    width: 19px;
    height: 19px;
    border: 1px solid #cdcdcd;
    position: relative;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}


.color_box .radio {
    width: 18px;
    height: 18px;
    margin: 0 7px 0 0;
    border: 1px solid #afb1b5;
    background: none;
    position: relative;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-size: contain;
    text-decoration: none;
}

.radio input {
    cursor: pointer;
}

.box_b{
    margin-top: 20px;
}


#main .radio3 {
    min-width: 38px;
    padding: 6px 18px 8px;
    margin: 0 10px 20px;
    font: 14px/16px 'Roboto', sans-serif;
}

.radio3 {
    width: auto;
    height: 14px;
    min-width: 31px;
    padding: 5px 7px 5px 9px;
    border-color: #FFFFFF;
    background: transparent;
    font: 12px/14px 'Roboto', sans-serif;
    text-align: center;
    color: #518ab7;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
}

.radio3 {
    width: auto;
    height: 14px;
    min-width: 31px;
    padding: 5px 7px 5px 9px;
    border-color: #cdcdcd;
    background: transparent;
    font: 12px/14px 'Roboto', sans-serif;
    text-align: center;
    color: #cdcdcd;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}

.radio {
    margin-top: 10px;
    width: 14px;
    height: 14px;
    border: 1px solid #1c4366;
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.checkbox, .radio {
    cursor: pointer;
    position: relative;
}

.box_b a{

    color: #000;
}

.color_title {
    padding-bottom: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tooltip</title>
	<link rel="stylesheet" href="css/css_tooltip.css">
	<link rel="stylesheet" href="css/jquery-ui.min.css">
</head>
<body>
<div id="main">
	<div class="color_title"> Цвета </div>
	<div class="color_box">
		<a href="#" class="radio" style="background-color: #FFFFFF;" title="Алюминий">
			<input type="radio" name="color" style="opacity: 0;">
		</a>

		<a href="#" class="radio graize" style="background-color: #F5F5DC; " title="Бежевый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>

		<a href="#" class="radio" style="background-color: #964B00; " title="Коричневый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>

		<a href="#" class="radio graize" style="background-color: #98FB98; " title="Светло-зеленый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>
		<a href="#" class="radio graize" style="background-color: #BC9D67; " title="Светло-зеленый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>
		<a href="#" class="radio graize" style="background-color: #EE1B2E; " title="Светло-зеленый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>
		<div class="add3 blocks modals" data-modal="group"></div>
	</div>
	<div class="color_box">
		<a href="#" class="radio" style="background-color: #FF4900;" title="Алюминий">
			<input type="radio" name="color" style="opacity: 0;">
		</a>

		<a href="#" class="radio graize" style="background-color: #42AAFF; " title="Бежевый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>

		<a href="#" class="radio" style="background-color: #150989; " title="Коричневый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>

		<a href="#" class="radio graize" style="background-color: #8B0000; " title="Светло-зеленый" >
			<input type="radio" name="color" style="opacity: 0;">
		</a>
		<div class="add3 blocks modals" data-modal="group"></div>
	</div>
</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script  type="text/javascript"  src="tooltip/jquery.js"></script>
	<script  type="text/javascript"  src="tooltip/jquery-ui.min.js"></script>
	<script  type="text/javascript"  src="tooltip/jquery-ui.js"></script>
	<script type="text/javascript" src="tooltip/tooltip.js"></script>	
</body>
</html>

6
  • @ВиталикЧерный Пожалуйста, постарайтесь публиковать развернутые ответы содержащие конкретный пример минимального решения, дополняя их ссылкой на источник. Ответы–ссылки (как и комментарии) не добавляют знаний в Рунет. 28 мар 2018 в 4:48
  • @NicolasChabanovsky разве комментарий является ответом? 28 мар 2018 в 8:37
  • @ВиталикЧерный Нет, не является, а было бы здорово увидеть его ответом! 28 мар 2018 в 8:39
  • @NicolasChabanovsky может вы оставите за мной право решать что мне делать? я дал хорошую статью, где наглядно описано как работает псевдоклассы. 28 мар 2018 в 8:44

1 ответ 1

1

Вопрос решился так :

.products div[data-tovar_type] div.color_box { overflow: hidden; }

.products div[data-tovar_type] div.color_box .radio {}
.products div[data-tovar_type] div.color_box .radio:nth-child(n+8) { visibility: hidden; position: absolute;} /*скрывать элементы с 7*/

.products div[data-tovar_type] div.color_box .modals {position: absolute; right: 10px; background-color: white; z-index: 200}
.products div[data-tovar_type] div.color_box .modals:nth-child(-n+8) { display: none;}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.