:nth-child(n):before is doesn't working?

Question

I have question: does :nth-child(n):before working?

So, I using SASS.
Why following code is not working?

@for $i from 1 through 4
  .block:nth-child(#{$i}):before
      background: url(../../img/block-img-#{$i}.jpg)
      background-size: cover

It's compiling to:

.content .cnt1 .block:nth-child(1):before {
  background: url(../../img/block-img-1.jpg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(2):before {
  background: url(../../img/block-img-2.jpg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(3):before {
  background: url(../../img/block-img-3.jpg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(4):before {
  background: url(../../img/block-img-4.jpg);
  background-size: cover;
}

All dirs to images is true. But it's not working :( What I'm doing wrong?

you also need to add `content:''` to the before-rule, and I guess you'll need to set a width and height for the element, otherwise the background might be applied to a 0px x 0px element. — Thomas Altmann, Jan 24 '17 at 14:37
Why are you setting background-size: cover in every rule? That seems like a quick way to completely bloat your CSS. — BoltClock, Jan 24 '17 at 14:41
Possible duplicate of [Why do pseudo-elements require a 'content' property?](http://stackoverflow.com/questions/17067918/why-do-pseudo-elements-require-a-content-property) — , Jan 24 '17 at 16:00

Mr Lister · Accepted Answer · 2017-01-25T05:53:59.410

By itself, a ::before pseudo element is not visible. You will also need to give it a display property, and some content. Otherwise, it won't show.

Now you haven't provided the HTML, but if I can presume that it's just a bunch of nested divs, the required extra CSS looks like this.

.content .cnt1 .block::before {
  display:block; content:'';
  height:200px;                /* a height, any height */
}

Or for a more complete example: (never mind the background images)

.content .cnt1 .block::before {
  display:block; content:'';
  height:200px;                /* a height, any height */
}
.content .cnt1 .block:nth-child(1)::before {
  background: url(http://images.clipartpanda.com/number-clipart-niXxEn7iB.jpeg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(2)::before {
  background: url(http://images.clipartpanda.com/clipart-numbers-9czE7pRpi.png);
  background-size: cover;
}

.content .cnt1 .block:nth-child(3)::before {
  background: url(http://images.clipartpanda.com/creation-clip-art-RTAE8d8TL.jpeg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(4)::before {
  background: url(http://images.clipartpanda.com/number-clip-art-RcA6Axgji.png);
  background-size: cover;
}

<div class="content">
<div class="cnt1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>

By the way, the notation for :before with one colon is deprecated; the preferred way is ::before.

Or, if you want to use :before for compatibility with older browsers, then be warned that you can't use background-size either.
That is, the only reason to use :before is if you want to be compatible with IE8. :before works in IE, ::before doesn't.
But since IE8 doesn't support background-size or nth-child(), you won't get this particular example to work in IE8 anyway, so there's no need to bother.

Oh yeah! I did than sh.. a lot of time and I didn't know where is the problem.. Thank you so much! — RamoFX, Jan 24 '17 at 15:13
I doubt if using a single colon precludes using `background-size`. Also, why would I need to add an explicit `display` property? — , Jan 24 '17 at 15:58
@torazaburo: Mr Lister is saying that [the only browser in the world that supports only the single-colon syntax doesn't support background-size anyway](http://stackoverflow.com/a/28527928), so using the single-colon syntax for compatibility is pointless if you're going to rely on background-size. The display: block declaration is required - unless said declaration already exists elsewhere or some other declaration exists that causes them to be blockified - because pseudo-elements don't have a default display value, so they take the initial value, inline, and the height property will not apply. — BoltClock, Jan 25 '17 at 04:16
@BoltClock Thanks for the clarification. But I thought all browsers supported the single-colon syntax. — , Jan 25 '17 at 04:27
@torazaburo: All browsers support the single-colon syntax so that stylesheets designed for IE8 and older will continue to work. But the only browser that *doesn't* support the double-colon syntax for ::before and ::after is IE8 (older versions don't support these two pseudos at all). The single-colon syntax is deprecated (and is invalid on ::selection and all other pseudo-elts defined in various CSS3 specs), and authors are strongly encouraged to use double colons for the sake of consistency, and other than IE8 compat there is no good reason to use single colons for any pseudo-elements today. — BoltClock, Jan 25 '17 at 04:30

:nth-child(n):before is doesn't working?

1 Answers1

Related