prtscr
для удобства щелканья пользователя по кнопкам, хотелось бы провернуть черестрочную окраску рядов, но у меня упорно продолжает окрашиваться только первая колонка ряда
советовали убрать :only-child - но тогда окрасились все delete
если убрать онли чайлд
html темплейт:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="{{url_for('static', filename='js/main.js') }}"></script>
<style>
.container{
max-width: 650px;
}
.stripe{}
.stripe :nth-of-type(2n) :only-child {
background: #aaaaaa;
}
.col-lg-9 {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container" width="300px">
<h4>Выберите Продукт</h4>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="panel panel-default">
<div class="panel-heading">Новые продукты</div>
<div class="panel-body stripe" id="log">
{% for entry in entries %}
<div class="row" data-product-id-row="{{entry.product_id}}">
<div class="col-lg-9">
<div data-product-id="{{entry.product_id}}"
onClick='$("#post_product_id").val($(this).attr("data-product-id"));
document.forms["invisible_form"].submit(); return false;'>{{entry.names.name}}
</div>
</div>
<div class="col-lg-2" onclick="delete_blank({{entry.product_id}})">
Delete
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<form id="invisible_form" action="/product_detail.html" method="post" target="_blank">
<input id="post_product_id" name="product_id" type="hidden" value="default">
</form>
</body>
</html>