Есть цвета, до позиции 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>