howardtyler howardtyler - 5 months ago 10
HTML Question

How to make my first-child in css work properly?

I wanted to remove the red background in the last article-container. Anyway here are the html code I'm trying to work on...

<section id="intro" class="intro text-center">
<div class="container">
<div class="row">
<div class="col-md-12 wp1 animated fadeInLeft">
<div class="col-md-8 col-md-offset-2 article-container">
text 1
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 wp1 animated fadeInLeft">
<div class="col-md-8 col-md-offset-2 article-container">
text 2
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 wp1 animated fadeInLeft">
<div class="col-md-8 col-md-offset-2 article-container">
text 3
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 wp1 animated fadeInLeft">
<div class="col-md-8 col-md-offset-2 article-container">
text 4
</div>
</div>
</div>
</div>
</section>


and my css I'm trying to do is this

div.article-container {
background-color: red;
}

div.article-container:last-child {
background-color: white;
}


Is there any css code for this?

Thanks!

Answer

Use last child selector on .row and set the background-color: white; to it's child .article-container. Check below is an example.

div.article-container {
  background-color: red;
}
.row:last-child .article-container {
  /* Change color as desired */
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="intro" class="intro text-center">
  <div class="container">
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 1
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 2
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 3
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 4
        </div>
      </div>
    </div>
  </div>
</section>

Comments