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;}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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