CODEWITHSUNDEEP
htmlcss
Vojta Matras
Vojta Matras

Reputation: 71

no space between childs in class in css

I have this code in html

<div class="small_world_news">
  <div class="small_world_news_article_box">
    <div>
      <img class="small_picture_world_news" src="http://placehold.it/100x100">
      <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4>
      <ul class="author_etc">
        <li>December 14, 2016</li>
        <li>
          <div class="first">by</div>
          <div class="blue">John Doe</div>
        </li>
      </ul>
    </div>
    <div>
      <img class="small_picture_world_news" src="http://placehold.it/100x100">
      <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4>
      <ul class="author_etc">
        <li>December 14, 2016</li>
        <li>
          <div class="first">by</div>
          <div class="blue">John Doe</div>
        </li>
      </ul>
    </div>
    <div>
      <img class="small_picture_world_news" src="http://placehold.it/100x100">
      <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4>
      <ul class="author_etc">
        <li>December 14, 2016</li>
        <li>
          <div class="first">by</div>
          <div class="blue">John Doe</div>
        </li>
      </ul>
    </div>
  </div>
</div>

And I need 20px space between firstarticle-secondarticle and secondarticle-thirdarticle. Also I need 30px space after last article. I know that I can make named divs, but I want to with child of class "small_world_news_Article_box". But this code doesent work.

.small_world_news_article_box {
  margin-bottom: 20px;
}

.small_world_news_article_box:last-child {
  margin-bottom: 30px;
}

Upvotes: 1

Views: 95

Answers (3)

Web Develop Wolf
Web Develop Wolf

Reputation: 6306

:last-child works on the element theres a few of not the containing element.

In your case the unnamed div the article is contained in is what you need to apply the class to. So what you need is:

.small_world_news_article_box > div{
    margin-bottom: 20px;
    overflow: auto;
}
.small_world_news_article_box > div:last-child{
    margin-bottom: 30px;
}

You can read more about how it all works here: https://css-tricks.com/almanac/selectors/l/last-child/

Upvotes: 0

Dragos Micu
Dragos Micu

Reputation: 351

Target the child div of the class like so:

.small_world_news_article_box>div {
margin-bottom: 20px;
}
.small_world_news_article_box>div:last-child{
margin-bottom: 30px;
}

Codepen: http://codepen.io/dragosmicu/pen/ZeXbNY

Clearfix:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
} 
.clearfix:after {
  clear: both;
}

Upvotes: 2

Shiva127
Shiva127

Reputation: 2623

Try this:

.small_world_news_article_box > div {
  margin-bottom: 20px;
}
.small_world_news_article_box > div:last-child{
  margin-bottom: 30px;
}

Upvotes: 1

Related Questions