Apply css to all elements except first one with same class name

March 23, 2023

I have below html structure, I want to apply border css to all elements with class name flw__subform-instance except first one:

<div class="flw__subform__content-wrapper">
    <div class="flw__subform__header"></div>
    <div class="flw__subform-instance">1</div> <!--exclude this bc 1st element -->
    <div class="flw__subform-instance">2</div>
    <div class="flw__subform-instance">3</div>
</div>

I have tried below code but its not working:

.flw__subform-instance{
    padding: 20px;
    border-top: 1em solid #ddd;
}
.flw__subform-instance:first-child {
    padding: 20px;
}

>Solution :

Short and simple:

.flw__subform-instance ~ .flw__subform-instance {}

Reference: General sibling combinator

Try it:

.bar > div {
  margin-bottom: 2px;
  height: 20px;
  background: #ff0;
}

.foo ~ .foo {
  background: #f00;
}

<div id="bar">
  <div class="baz">0</div>
  <div class="foo">1</div>
  <div class="foo">2</div>
  <div class="baz">0</div>
  <div class="foo">3</div>
  <div class="foo">4</div>
  <div class="baz">0</div>
</div>