CODEWITHSUNDEEP
css
Leff
Leff

Reputation: 1320

CSS - first-child selector not working

I am using bulma as css framework, and have a section on my page where I am looping over items, and creating multiline columns.

<section class="section employees">
    <div class="container">
        <div v-for="(value, key) of employeesGroupedByDepartments">
           <div class="columns is-multiline department">
                <div class="title-with-line">
                  <h4><span>{{ key }}</span></h4>
                </div>
                <div class="employee column is-3" v-for="employee of value">
                    <div class="card">
                        <figure class="image is-96x96">
                            <img :src="employee.image.data.path" alt="">
                        </figure>
                        <h4 class="title is-5">
                            {{employee.title}}
                        </h4>
                        <h6 class="subtitle is-6">
                            <small>
                               {{getExtras(employee, 'position')}}
                            </small>
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

I would like to remove left padding for each first child column, I have tried with setting even to both classes padding left 0 as important but nothing worked:

.employees {

     .column:first-child, employee:first-child {
          padding-left: 0!important;
     }
}

What am I doing wrong?

Upvotes: 0

Views: 399

Answers (2)

kinggs
kinggs

Reputation: 1168

.column is not the first child as you have a div with class title-with-line proceeding it. What you're looking for is:

.employees {
   .column:nth-child(2), .employee:nth-child(2) {
      padding-left: 0!important;
   }
}

Upvotes: 1

giorgio
giorgio

Reputation: 10202

A .column will never be a first-child, because there is always a div.title-with-line before it.

From MDN:

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

You would need the :nth-child or :nth-of-type selector.

Upvotes: 7

Related Questions