черестрочная окраска

despair1 · March 8, 2018

для удобства щелканья пользователя по кнопкам, хотелось бы провернуть черестрочную окраску рядов, но у меня упорно продолжает окрашиваться только первая колонка ряда

советовали убрать :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>

Int · March 12, 2018

Может быть, .stripe > *:nth-child(2n) ?
Я не уверен, что правильно понял проблему.

Sign In

черестрочная окраска

Question

despair1

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Int

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information