0

Hi I'm struggling to target this class and I have no idea why. It seems that the first div interferes with the pseudo selector on the second div.

HTML

<div class="home-work">
<div class="home-work-header"><h3><span>test</span></h3></div>
<div class="home-work-container"><p>test</p></div>
<div class="home-work-container"></div>
<div class="home-work-container"></div>
</div>

CSS

.home-work-container { 
width:100%;
margin:10px 20px;
background-color:grey;
height:250px;
&:first-of-type {padding:144px;}
}

https://jsfiddle.net/L0uoz531/

Thanks in advance

Frits
  • 7,341
  • 10
  • 42
  • 60
Mo Martin
  • 207
  • 3
  • 12

1 Answers1

1

That's because of the &:first-of-type

That property is actually referencing the very first sibling div (the one with id="home-work-header")

check out this fiddle: https://jsfiddle.net/L0uoz531/1/

If you were to target the 2nd child, you would get what you were aiming for. This link here is probably the best reference for complex selectors and how they work: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

.home-work-container { 
 width:100%;
 margin:10px 20px;
 background-color:grey;
 height:250px;
 &:nth-of-type(2) {
   padding:144px;
   }
 }
<div class="home-work">
  <div class="home-work-header">
    <h3><span>test</span></h3></div>
  <div class="home-work-container">
    <p>test</p>
  </div>
  <div class="home-work-container"></div>
  <div class="home-work-container"></div>
</div>
Frits
  • 7,341
  • 10
  • 42
  • 60
  • Thanks that's done it. I can't say I completely understand that though, as It was the first instance of 'home-work-container'. – Mo Martin Apr 26 '16 at 16:21
  • You're welcome! Please remember to mark the answer as accepted if it helped! Cheers. – Frits Apr 26 '16 at 16:24