Last-Child во вложенном div

Question

Я новичок в CSS, и после поиска в Google мне все еще трудно заставить работать селектор: last-child.

HTML:

<div class="A">
    <div class="B">
        <div class="C"></div>
    </div>
    <div class="B">
        <div class="C"></div>
    </div>
    <div class="B">
        <div class="C"></div>
    </div>
</div>

CSS:

.A > .B > .C {
    margin-bottom: 8px;
}

.A > .B > .C:last-child {
    margin-bottom: 0px;
}

Моя цель - я хочу, чтобы первые два div .C имели нижнее поле, но последний .C div не должен иметь отступ. Однако: last-class не регистрируется - все 3 .C div имеют нижнее поле 8px.

Я также пробовал варианты: last-child в разных классах, и дочерний селектор против дочернего селектора Я не уверен, что я делаю неправильно / что мне нужно сделать, чтобы установить для последнего поля класса .C значение 0px.

Редактировать: На самом деле я могу заставить вышеописанное работать в codepen.io ... ниже приведен мой фактический код, который я не могу заставить работать правильно.

<div class="A" ng-repeat="component in components">
    <div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="B"  ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
        <span class="C">
            <img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
        </span>
    </div>
</div>

Это будет повторяться для количества компонентов, максимум 4 компонента.

Редактировать 2: Это было решено с помощью разных вещей, предложенных ниже. Я изменил промежуток до div, затем понял, что angular повторяет div класса A. Ниже мой последний HTML и CSS:

HTML:

<div class="A">
    <div class="B" ng-repeat="component in components">
        <div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="C"  ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
            <div class="btn btn-status-sections">
                <img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
            </div>
        </div>
    </div>
</div>

CSS:

.A .B .C {
margin-bottom: 8px;
}
.A .B:last-child .C {
margin-bottom: 0px;
}

Answer 1

Спасибо всем!

Мне нужно было сделать то, что предлагали люди.

• Сначала менялся промежуток до деления.
• Вторым было добавление div-обертки над угловым повторяющимся div, который стал классом А.
• Третий использовал .A .B: last-child .C в моем css.

Я также узнал, что размещение действительного кода вместо базового примера помогает больше.

Answer 2

Я вижу, вы хотите применить css к вашему div, имеющему класс "C" под "A". в этом случае вам не нужно беспокоиться о классе "B".

Например, если у вас есть родительский класс. Вы можете получить доступ к n-й глубине ребенка. как я и пытался.

<div class="A">
<div class="B">
    <div class="C">2</div>
</div>
<div class="B">
    <div class="C">2</div>
</div>
<div class="B">
    <div class="C">3</div>
</div>

Вот CSS

.A > div > div { 
  background-color:yellow;
}
.A > div:last-child > div:last-child { 
  background-color:red;
}

https://jsfiddle.net/kyaLh19n/

если вы посмотрите на это изображение, что я сделал. Я применил CSS ко всем дочерним элементам в классе А, а затем переопределил последний.

Надеюсь, я смогу вам помочь.

Answer 3

С вашим кодом вы можете использовать .A > .B:last-child > .C и установить margin-bottom:0.

См. Ниже фрагмент:

.A {
  border:1px solid red;
}

.B > .C {
    margin-bottom: 8px;
    background-color:lightpink;
    color:white;
}

.A > .B:last-child > .C {
    margin-bottom: 0px;
}

<div class="A">
    <div class="B">
        <div class="C">1</div>
    </div>
    <div class="B">
        <div class="C">2</div>
    </div>
    <div class="B">
        <div class="C">3</div>
    </div>
</div>

Answer 4

Ваши C-дивы - всего лишь одинокие дети B-див. Таким образом, каждый из них будет иметь запас 0. Вы хотите добавить поле в C, который находится внутри последнего B. Так что

.A > .B:last-child > .C {
    margin-bottom: 0px;
}

Кроме того, вы можете изменить порядок HTML и сохранить CSS, как вы его определили, следующим образом:

<div class="A">
    <div class="B">
        <div class="C"></div>
        <div class="C"></div>
        <div class="C"></div>
    </div>
</div>