There are colors, to the position of nth-child (n + 5) we show them, after we insert another object (a square with a plus). And how to do it through CSS so that if exactly 5 colors of everything are displayed, all five (without a square with a plus), if more, then the fifth is a square with a plus? and the block has certain boundaries
#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> 