Как задать свойства следующего элемента?

Question

[YourQuestion]

<style>
.panel{
border:1px solid #000;
}
</style>

<div class="body">
    <div class="panel"></div>
    <div class="panel"></div>
</div>

Вопрос: возможно ли задать свойство 'border-top:0px;' для следующего(2-го) блока .panel?

Answer 1

[YourQuestion]

вспомнил=) .panel:last-child или .panel:nth-child или .panel + .panel

Answer 2

[Vladislav Soprun]

.panel {
	border: 1px solid black;
}
.panel + .panel {
	border-top-color: red;
}

Ну или же через nth-child

Answer 3

[Therapyx]

<style>
.panel{
border:1px solid #000;
}
.custom {
 border-top:0;
}
<div class="body">
    <div class="panel"></div>
    <div class="panel custom"></div>
</div>
</style>

можно добавлять по 2-3... класса делая вот такие вот изменения. Только чтобы не плодить кучу грязи, лучше заранее продумывать как и куда вставлять )

Comments

[YourQuestion]

это самый простой вариант. подразумевалось - есть ли решение без использования сторонних классов

[YourQuestion]

.panel:last-child - вспомнил)

Answer 4

[Ivanq]

.panel + * {
    border-top: 0px;
}