让第n个孩子与其他班级一起工作

Question

我很难弄清楚为什么我的nth-child(even)无法与添加的类一起使用。

基本上，我想为偶数元素设置与原始元素不同的样式。 “样式1”和“样式2”都是我尝试过的两个不同的变体。都没有。

有人看到我在做什么错吗？

原文：

.catalogSmallCircle.rectangle {
    width: 400px;
    min-height: 200px;
    webkit-transition: all 1s; transition: all 1s;transform: translate(-30%, 
-45%);-webkit-transform: translate(-30%, -45%);
 }

新功能：

样式1

.rectangle .catalogSmallCircle:nth-child(even) {
    webkit-transition: all 1s; transition: all 1s;transform: translate(-80%, -45%);-webkit-transform: translate(-80%, -45%);
    background: green;
}

样式2

.catalogSmallCircle:nth-child(even).rectangle {
    webkit-transition: all 1s; transition: all 1s;transform: translate(-80%, -45%);-webkit-transform: translate(-80%, -45%);
    background: green;
}

HTML

<div class="smallCatalogButtonWrap">
    <div class="catalogSmallCircle">
      <div class="catalogSmallCircleIn">
        <div class="total-center">
           <div class="circlePlus"></div>
        </div>
      </div>
      <div class="catalogCircleExpand">
        <div class="catalogExpandClose"></div>
        <div class="total-center expandText">
           <span class="catalogName pdfSubHeader"></span>
            <p class="dGw circleExpandText"></p>
            <button class="catalogDownload downloadButton" >View</button>
            <button class="catalogDownload requestButton" >Request</button> 
        </div>
      </div>
    </div>
</div>

JS：

$('.catalogSmallCircleIn').on('click', function(event) {
    var $smallCircle = $(this).closest('.catalogSmallCircle');

    $smallCircle
        .addClass('rectangle')
        .find('.catalogSmallCircleIn')
        .hide();

    $smallCircle
        .find('.catalogCircleExpand')
        .fadeIn(100)
        .addClass('rectangle');