CODEWITHSUNDEEP
htmlcsscss-selectors
Bene
Bene

Reputation: 1281

CSS :last-child overriding all

The css with :last-child is overriding all other.

.service-teaser .item:first-child {                                     
    margin-left: 0px;                                               
    margin-right: 50px;
}                                                                       

.service-teaser .item:last-child {                                      
    margin-left: 50px;                                              
    margin-right: 0px;                                             
}

My html looks like is the following :

<div class="container service-teaser>
  <div class="row">
    <div class="col-md-4">
      <a href="#" class="item"></a>
    </div>
    <div class="col-md-4">
      <a href="#" class="item"></a>
    </div>
    <div class="col-md-4">
      <a href="#" class="item"></a>
    </div>
  </div>
</div>

Now every element with the class "item" will be overriden by :last-child. Where is my problem? :/

Upvotes: 3

Views: 2713

Answers (4)

potashin
potashin

Reputation: 44581

Each .item is located within it's own .col-md-4 element, so there is no way you can target them with :first-child or :last-child. .items should either be within one container or you should target .col-md-4 elements instead. For example:

.service-teaser .col-md-4:first-child .item{ 
  margin-left: 0px;                                               
  margin-right: 50px;
}

.service-teaser .col-md-4:last-child .item{ 
  margin-left: 50px;                                              
  margin-right: 0px;  
}

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

The problem is that your .item elements are wrapped in div elements. They are always both the :first-child and :last-child of those div elements. Instead you need to place those pseudo-class selectors on the div elements themselves:

.service-teaser .row div:first-child .item { ... }
.service-teaser .row div:last-child .item { ... }

Upvotes: 4

Wes Foster
Wes Foster

Reputation: 8900

This is because in the scope of div.item, each item is considered to be both the first and last child.

Do this instead:

.service-teaser .col-md-4:first-child .item {                                     
  margin-left: 0px;                                               
  margin-right: 50px;
}                                                                       

.service-teaser .col-md-4:last-child .item {                                      
  margin-left: 50px;                                              
  margin-right: 0px;                                             
}

Upvotes: 1

Guy
Guy

Reputation: 11305

Your .item elements are the only, and therefore last children within their parent elements. To achieve what I think you are looking for you need: 

.service-teaser .col-md-4 .item {                                      
    margin-left: 50px;                                              
    margin-right: 0px;                                             
}

This would not be an advised solution as you should try to stay away from using framework classes as part of your styling, but with some small updates to markup you could achieve the same result.

Upvotes: 1

Related Questions