CODEWITHSUNDEEP
htmlcss
Renboy
Renboy

Reputation: 451

the css of my second <article> stops working when I add a new tag after it?

This is kind of weird, In my second article, I have 2 images, the first one is a circular shape and the other one has a border-radius except on the right side. I problem is that whenever I add a new tag after the 2nd article, the css of the second article is removed, not sure why.

HTML

.section3 {
  background: #f6e7c0;
  max-width: 1024px;
  width: 100%;
  height: 1024px;
  margin: 0 auto;
}
.section3 article {
  border: 1px solid black;
}
.section3 article img {
  height: 200px;
  width: 200px;
}
.section3 article:first-child {
  float: right;
  padding-top: 65px;
}
.section3 article:first-child img:first-child {
  height: 400px;
  width: 400px;
  border-radius: 5%;
  padding-right: 10px;
}
.section3 article:first-child img:last-child {
  height: 400px;
  width: 400px;
  border-top-left-radius: 5%;
  border-bottom-left-radius: 5%;
}
<div class="section3">
  <article>
    <img src="images/IMG_9243.JPG" alt="">
    <img src="images/IMG_0244.JPG" alt="">
  </article>
  <article>
    <img src="images/IMG_9935.JPG" alt="">
    <img src="images/IMG_9479.JPG" alt="">
  </article>
  <h1>asd</h1>
</div>

https://jsfiddle.net/mmc5qczc/

Upvotes: 0

Views: 63

Answers (2)

rfinster
rfinster

Reputation: 68

It is because of the :last-child pseudo-class. So your selector says: "give me a article which is the last child inside an element with section3-class."

You could use :nth-child(2) or more specific selectors instead.

https://jsfiddle.net/xeoe330e/

http://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 1

primehalo
primehalo

Reputation: 869

In your JSFiddle you have several .section3 article:last-child CSS which I don't see in the what you posted above. When you add a tag after the second article the second article is no longer the last child. It may be the last article of .section3 but it isn't the last child.

Upvotes: 3

Related Questions