Блог

Главная - Вопросы по программированию - другое заполнение, если следующий div имеет тот же класс, что и предыдущий

другое заполнение, если следующий div имеет тот же класс, что и предыдущий

#css #sass #css-selectors #styles

#css #sass #css-селекторы #стили

Вопрос:

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

 <style>
    .text {
        margin-bottom: 20px;
    }
</style>
<div class="text"></div>
<div class="text"></div>
<div class="text myText"></div> <!-- margin-bottom this 5px; -->
<div class="text myText"></div> <!-- margin-bottom this 5px; -->
<div class="text myText"></div> <!-- margin-bottom this 20px; -->
<div class="text"></div>
<div class="text myText"></div> <!-- margin-bottom this 20px; -->
<div class="text"></div>

Комментарии:

1. это может сработать .text{ margin-bottom:20px; } .text.myText{ margin-bottom:5px; } .text .text:not(.myText){ margin-top:20px; }

Ответ №1:

Поскольку CSS не имеет предыдущего или родительского селектора, вы можете использовать margin-top by таким образом:

 .myText   .myText {margin-top: 5px;}
.text:not(.myText)   .myText,
.myText   .text:not(.myText) {margin-top: 20px;}

div {border: 1px solid #99f;}

.text:not(.myText)   .myText:last-of-type,
.text:not(.myText)   .myText:last-of-type {margin: 0;}  
 <div class="text">No Bot Margin</div>
<div class="text">No Bot Margin</div>
<div class="text myText">margin-bottom this 5px;</div> <!-- margin-bottom this 5px; -->
<div class="text myText">margin-bottom this 5px;</div> <!-- margin-bottom this 5px; -->
<div class="text myText">margin-bottom this 20px;</div> <!-- margin-bottom this 20px; -->
<div class="text">No Bot Margin</div>
<div class="text myText">margin-bottom this 20px;</div> <!-- margin-bottom this 20px; -->
<div class="text">No Bot Margin</div>

Это самое близкое, что я могу вам дать. Также похоже, что ваша логика не согласуется.

Комментарии:

1. разве я не могу использовать margin-bottom, а не margin-top? Я просто хотел перезаписать margin-bottom для myText css, поскольку все поля используются по умолчанию в нашем приложении для чата. не хочу нарушать его, изменяя что-либо еще..

2. @Basit я понимаю, но, как я уже сказал, причина в том, что CSS может перемещаться только сверху слева направо. Он не может перемещаться на противоположную сторону, так что, к сожалению, нет. :(