CODEWITHSUNDEEP
htmlcsscss-selectors
RhysE96
RhysE96

Reputation: 197

nth-of-type not working inside a list

I cant seem to change the background of my divs when they are inside an li. I think the issue is to do with the order in which my elements are in. 

<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
</ul>

.featured-items li .inner:nth-of-type(1) {
    background-image: url(../images/phone.jpg);
}

.featured-items li .inner:nth-of-type(2) {
    background-image: url(../images/firelace.jpg);
}

At the moment, every inner shows "phone.jpg".

Upvotes: 0

Views: 551

Answers (3)

Ehsan
Ehsan

Reputation: 12951

Try it :

li {
	border:1px solid red;
}
.featured-items li:nth-of-type(1) > .inner{
    background-image:url(http://images.clipartpanda.com/flower-clip-art-4c9arqMcE.png);
    background-size:20px 20px;
}

.featured-items li:nth-of-type(2) > .inner {
    background-image:url(http://www.clker.com/cliparts/d/E/X/A/4/f/pink-daisy-md.png);
	 background-size:20px 20px;
}
<ul class="featured-items">
   <li>
      <div class="inner"><div class="item-content">1</div></div>
  </li>
 <li>
      <div class="inner"><div class="item-content">2</div></div>
  </li>
  <li>
    <div class="inner"><div class="item-content">3</div></div>
  </li>
</ul>

Upvotes: 0

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

It should be like .featured-items li:nth-of-type(2)>div.inner

.featured-items li:nth-of-type(1)>div.inner  {
    background-color: red;
}

.featured-items li:nth-of-type(2)>div.inner {
    background-color: yellow;
}
<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div>v</div></li>
        <li><div class="inner"><div class="item-content"></div>f</div></li>
        <li><div class="inner"><div class="item-content"></div>vl</div></li>
</ul>

Upvotes: 3

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

You do not want to select the .inner by :nth-of-type(), but rather the li. That is: "select the (n)th list element and apply the following styles to its .inner child.

.featured-items li:nth-of-type(1) .inner {
    background-image: url(../images/phone.jpg);
}

.featured-items li:nth-of-type(2) .inner {
    background-image: url(../images/firelace.jpg);
}
<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
</ul>

Upvotes: 1

Related Questions