Combine CSS background-image and gradient on third h3 using nth-child

Question

I'm having a heck of a time trying to combine a diagonal linear gradient and regular background-image together plus apply it only to the second h3 element; here is what I've got:

HTML

<div id="something">
  <div><h3>...</h3></div>
  <div><h3>...</h3></div>
  <div><h3>...</h3></div>
  <div><h3>...</h3></div>
</div>

CSS

#something h3:nth-child(2) {
  background: linear-gradient(135deg, rgba(221,221,221,1) 0%,
  rgba(221,221,221,1) 95%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%),
  #ddd url(/assets/img/bullet.png) left 12px no-repeat;
}

I've had the nth-child selector working on other stuff previously before and this gradient is from an online generator, what am I missing here?

Answer 1

Looks like the selector should be:

#something > div:nth-child(3) > h3

https://jsfiddle.net/db2n5r63/1/

Answer 2

linear-gradient() takes the place of url(). In fact they are two delarations for the same background. One will be chosen. So define more precisely what you want and perhaps chose a span inside H3 to achieve the effect you want.

Answer 3

Your nth-childwont work beacuse the h3 tags are wrapped in a div so can you do something like this:

#something div:nth-child(2) h3

Now to make the background work we combine the background image url and the gradient. You can define the background url first then do a comma and define the gradient:

This stackoverflow question answers that in more depth.

#something div:nth-child(2) h3{
  background:  url("http://lorempixel.com/300/300/") no-repeat,linear-gradient(135deg, rgba(221,221,221,1) 0%,
  rgba(221,221,221,1) 95%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%);
  background-position-x: 12px;
}

I've made an Example for you to see this in action.