Question 43609 in Html Question posted in
Some basic documentation can be found here.

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

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;
}
Tags:

3

Answers


  1. 0

    Short and simple:

    .flw__subform-instance ~ .flw__subform-instance {}

    Reference: General sibling combinator

    Try it:

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

.foo ~ .foo {
  background: #f00;
}
    <div>
  <div class="baz">.baz</div>
  <div class="foo">.foo</div>
  <div class="foo">.foo</div>
  <div class="baz">.baz</div>
  <div class="foo">.foo</div>
  <div class="foo">.foo</div>
  <div class="baz">.baz</div>
</div>
    Login or Signup to reply.
  2. 0 
    .flw__subform-instance{
    padding: 20px;
    border-top: 1em solid #ddd;
}
.flw__subform-instance:first-child {
    padding: 20px;
}

.flw__subform__content-wrapper div:nth-child(2){
    padding: 0px;
    border-top: 0em solid red;
}
    <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>

    You can use nth-child selector to reset the css of 1st element which is the second of the wrapper to solve your problem.

    Login or Signup to reply.
  3. 0 
    .flw__subform__content-wrapper .flw__subform-instance:not(.flw__subform-instance:nth-of-type(2)) {border:1px solid #000000;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search