CSS transform does not get applied on elements selected by :nth-child()

Question

Consider the following HTML:

<p>
  <span> A </span>
  <span> A </span>
  <span> A </span>
</p>

Now try applying this CSS on it:

p span:nth-of-type(2) {transform: rotateX( 180deg ) ; color: blue }

You will see that the color has been changed on the second span, but the transform property has not. Could anyone explain why this is the case?

score 0 · Answer 1 · answered May 31 '19 at 17:19

0

It seems the reason is that css transform works only on "block" elements. Since is an "inline"element, it will not be affected.

answered May 31 '19 at 17:19

Shaman

111
1
4

score 0 · Accepted Answer · answered May 31 '19 at 17:20

<span> by default has display: inline and you need display:block or display:inline-block for transform to take effect.

p span:nth-of-type(2) {
  display: inline-block;
  transform: rotateX( 180deg);
  color: blue
}

<p>
  <span> A </span>
  <span> A </span>
  <span> A </span>
</p>

score 0 · Answer 3 · answered May 31 '19 at 17:22

In reference to this post, span is an inline element and the transform property will not work unless you use "display:block;", or in your case "display:inline-block;"

Change your css to this:

p span:nth-of-type(2){
  display: inline-block;
  transform: rotateX(180deg);
  color: blue;
}

score 0 · Answer 4 · answered May 31 '19 at 17:27

:nth-child won't apply to the class, just the element only it works. You need to apply to the children first then it works fine.

p span:nth-of-type(3) {
  display: inline-block;
  transform: rotateX( 180deg);
 }

<p>
  <span> A </span>
  <span> A </span>
  <span> A </span>
</p>

CSS transform does not get applied on elements selected by :nth-child()

4 Answers4