Excessive CSS3 selector qualifications needed for background positioning?

Question

Excessive CSS3 selector qualifications needed for background positioning?

I stumbled upon this awesome CSS3 3D animation and viewed it in the following browsers:

Safari 9.0.1
Chrome 47.0.2526.106
Firefox 43.0.1

I experimented with the code that the site provides (this is a single HTML page that does not require external files, just makes some valid external HTTP links). I noticed that there are CSS instructions .strip .a .strip .b, etc.

From the fact that, as I thought, I understand, the indication .stripon these lines overrides the CSS selector, since there are no other cases of a class .a, class .b, etc ... to introduce any ambiguity - these class names are almost identical to the identifiers in in this case, since each refers to only one HTML tag.

However, when I remove .stripfrom these selectors (for example, make it simple selectors .a, .betc.), the corresponding CSS offsets background-positionseem to stop working, and the strip image for these lines only show the leading rectangular area of the image, and not the slices at the corresponding offsets background position. The result will be the same in all the above browsers.

, . .strip .a, .b, .c .d. , , -, , .

webkit, mozkit -, CSS ?

body {
  background: #000;
  color: rgb(236, 132, 57)
}
h1 {
  font: small-caps 167% Arial, Helvetica, sans-serif
}
#container {
  text-align: center;
  margin: 0 auto;
  top: 450px;
  width: 550px;
  -moz-perspective: 900px;
  -webkit-perspective: 900
}
#container:hover * {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused
}
#frame {
  width: 33px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;  /* translate must be last */
  -moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
  -webkit-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px)
}
.strip {
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-animation: spin 25s infinite linear;
  -webkit-animation: spin 25s infinite linear
}
.strip div {
  position: absolute;
  background: #000 url(http://baloziproductions.com/thailand-sunrise.jpg);  /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}
.a {
  background-position: 0 0;
  -moz-transform: rotateY(0deg) translateZ(124px);
  -webkit-transform: rotateY(0deg) translateZ(124px)
}
.b {
  background-position: 759px 0;
  -moz-transform: rotateY(15deg) translateZ(124px);
  -webkit-transform: rotateY(15deg) translateZ(124px)
}
.c {
  background-position: 726px 0;
  -moz-transform: rotateY(30deg) translateZ(124px);
  -webkit-transform: rotateY(30deg) translateZ(124px)
}
.d {
  background-position: 693px 0;
  -moz-transform: rotateY(45deg) translateZ(124px);
  -webkit-transform: rotateY(45deg) translateZ(124px)
}
.strip .e {
  background-position: 660px 0;
  -moz-transform: rotateY(60deg) translateZ(124px);
  -webkit-transform: rotateY(60deg) translateZ(124px)
}
.strip .f {
  background-position: 627px 0;
  -moz-transform: rotateY(75deg) translateZ(124px);
  -webkit-transform: rotateY(75deg) translateZ(124px)
}
.strip .g {
  background-position: 594px 0;
  -moz-transform: rotateY(90deg) translateZ(124px);
  -webkit-transform: rotateY(90deg) translateZ(124px)
}
.strip .h {
  background-position: 561px 0;
  -moz-transform: rotateY(105deg) translateZ(124px);
  -webkit-transform: rotateY(105deg) translateZ(124px)
}
.strip .i {
  background-position: 528px 0;
  -moz-transform: rotateY(120deg) translateZ(124px);
  -webkit-transform: rotateY(120deg) translateZ(124px)
}
.strip .j {
  background-position: 495px 0;
  -moz-transform: rotateY(135deg) translateZ(124px);
  -webkit-transform: rotateY(135deg) translateZ(124px)
}
.strip .k {
  background-position: 462px 0;
  -moz-transform: rotateY(150deg) translateZ(124px);
  -webkit-transform: rotateY(150deg) translateZ(124px)
}
.strip .l {
  background-position: 429px 0;
  -moz-transform: rotateY(165deg) translateZ(124px);
  -webkit-transform: rotateY(165deg) translateZ(124px)
}
.strip .m {
  background-position: 396px 0;
  -moz-transform: rotateY(180deg) translateZ(124px);
  -webkit-transform: rotateY(180deg) translateZ(124px)
}
.strip .n {
  background-position: 363px 0;
  -moz-transform: rotateY(195deg) translateZ(124px);
  -webkit-transform: rotateY(195deg) translateZ(124px)
}
.strip .o {
  background-position: 330px 0;
  -moz-transform: rotateY(210deg) translateZ(124px);
  -webkit-transform: rotateY(210deg) translateZ(124px)
}
.strip .p {
  background-position: 297px 0;
  -moz-transform: rotateY(225deg) translateZ(124px);
  -webkit-transform: rotateY(225deg) translateZ(124px)
}
.strip .q {
  background-position: 264px 0;
  -moz-transform: rotateY(240deg) translateZ(124px);
  -webkit-transform: rotateY(240deg) translateZ(124px)
}
.strip .r {
  background-position: 231px 0;
  -moz-transform: rotateY(255deg) translateZ(124px);
  -webkit-transform: rotateY(255deg) translateZ(124px)
}
.strip .s {
  background-position: 198px 0;
  -moz-transform: rotateY(270deg) translateZ(124px);
  -webkit-transform: rotateY(270deg) translateZ(124px)
}
.strip .t {
  background-position: 165px 0;
  -moz-transform: rotateY(285deg) translateZ(124px);
  -webkit-transform: rotateY(285deg) translateZ(124px)
}
.strip .u {
  background-position: 132px 0;
  -moz-transform: rotateY(300deg) translateZ(124px);
  -webkit-transform: rotateY(300deg) translateZ(124px)
}
.strip .v {
  background-position: 99px 0;
  -moz-transform: rotateY(315deg) translateZ(124px);
  -webkit-transform: rotateY(315deg) translateZ(124px)
}
.strip .w {
  background-position: 66px 0;
  -moz-transform: rotateY(330deg) translateZ(124px);
  -webkit-transform: rotateY(330deg) translateZ(124px)
}
.strip .x {
  background-position: 33px 0;
  -moz-transform: rotateY(345deg) translateZ(124px);
  -webkit-transform: rotateY(345deg) translateZ(124px)
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0)
  }
  to {
    -moz-transform: rotateY(-360deg)
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0)
  }
  to {
    -webkit-transform: rotateY(-360deg)
  }
}

<div id="container">
  <h1>Image Wrapped Around A Spinning strip</h1>
  <div id="frame">
    <div class="strip">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
      <div class="k"></div>
      <div class="l"></div>
      <div class="m"></div>
      <div class="n"></div>
      <div class="o"></div>
      <div class="p"></div>
      <div class="q"></div>
      <div class="r"></div>
      <div class="s"></div>
      <div class="t"></div>
      <div class="u"></div>
      <div class="v"></div>
      <div class="w"></div>
      <div class="x"></div>
    </div>
  </div>
</div>

+4

css

clearlight 28 . '15 5:01

1

Harry · Accepted Answer · 2015-12-28T05:55:15+0000

- , .strip div.

.strip div {
  position: absolute;
  background: #000 url(http://baloziproductions.com/thailand-sunrise.jpg); /* this causes the problem */
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}

background , UA longhand background-*. longhand, (, background-color, background-image), . . background-position 0% 0%.

W3C Spec: ^{( )}
" " - . . , " ", "background-position", "background-size", "background-repeat", "background-origin", 'background-clip ' background-attachment , , .

, background-position .strip div . .strip .a, .b, .c, .strip div .

.strip div 011, . .strip .a 020, 2 . .a 010, .

: ( .strip div .strip .a, .b ..)

body {
  background: #000;
  color: rgb(236, 132, 57)
}
h1 {
  font: small-caps 167% Arial, Helvetica, sans-serif
}
#container {
  text-align: center;
  margin: 0 auto;
  top: 450px;
  width: 550px;
  -moz-perspective: 900px;
  -webkit-perspective: 900
}
#container:hover * {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused
}
#frame {
  width: 33px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
  -webkit-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px)
}
.strip {
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-animation: spin 25s infinite linear;
  -webkit-animation: spin 25s infinite linear
}
.strip div {
  position: absolute;
  background: #000 url(http://baloziproductions.com/thailand-sunrise.jpg);
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}
.a {
  background-position: 0 0;
  -moz-transform: rotateY(0deg) translateZ(124px);
  -webkit-transform: rotateY(0deg) translateZ(124px)
}
.b {
  background-position: 759px 0;
  -moz-transform: rotateY(15deg) translateZ(124px);
  -webkit-transform: rotateY(15deg) translateZ(124px)
}
.c {
  background-position: 726px 0;
  -moz-transform: rotateY(30deg) translateZ(124px);
  -webkit-transform: rotateY(30deg) translateZ(124px)
}
.d {
  background-position: 693px 0;
  -moz-transform: rotateY(45deg) translateZ(124px);
  -webkit-transform: rotateY(45deg) translateZ(124px)
}
.e {
  background-position: 660px 0;
  -moz-transform: rotateY(60deg) translateZ(124px);
  -webkit-transform: rotateY(60deg) translateZ(124px)
}
.f {
  background-position: 627px 0;
  -moz-transform: rotateY(75deg) translateZ(124px);
  -webkit-transform: rotateY(75deg) translateZ(124px)
}
.g {
  background-position: 594px 0;
  -moz-transform: rotateY(90deg) translateZ(124px);
  -webkit-transform: rotateY(90deg) translateZ(124px)
}
.h {
  background-position: 561px 0;
  -moz-transform: rotateY(105deg) translateZ(124px);
  -webkit-transform: rotateY(105deg) translateZ(124px)
}
.i {
  background-position: 528px 0;
  -moz-transform: rotateY(120deg) translateZ(124px);
  -webkit-transform: rotateY(120deg) translateZ(124px)
}
.j {
  background-position: 495px 0;
  -moz-transform: rotateY(135deg) translateZ(124px);
  -webkit-transform: rotateY(135deg) translateZ(124px)
}
.k {
  background-position: 462px 0;
  -moz-transform: rotateY(150deg) translateZ(124px);
  -webkit-transform: rotateY(150deg) translateZ(124px)
}
.l {
  background-position: 429px 0;
  -moz-transform: rotateY(165deg) translateZ(124px);
  -webkit-transform: rotateY(165deg) translateZ(124px)
}
.m {
  background-position: 396px 0;
  -moz-transform: rotateY(180deg) translateZ(124px);
  -webkit-transform: rotateY(180deg) translateZ(124px)
}
.n {
  background-position: 363px 0;
  -moz-transform: rotateY(195deg) translateZ(124px);
  -webkit-transform: rotateY(195deg) translateZ(124px)
}
.o {
  background-position: 330px 0;
  -moz-transform: rotateY(210deg) translateZ(124px);
  -webkit-transform: rotateY(210deg) translateZ(124px)
}
.p {
  background-position: 297px 0;
  -moz-transform: rotateY(225deg) translateZ(124px);
  -webkit-transform: rotateY(225deg) translateZ(124px)
}
.q {
  background-position: 264px 0;
  -moz-transform: rotateY(240deg) translateZ(124px);
  -webkit-transform: rotateY(240deg) translateZ(124px)
}
.r {
  background-position: 231px 0;
  -moz-transform: rotateY(255deg) translateZ(124px);
  -webkit-transform: rotateY(255deg) translateZ(124px)
}
.s {
  background-position: 198px 0;
  -moz-transform: rotateY(270deg) translateZ(124px);
  -webkit-transform: rotateY(270deg) translateZ(124px)
}
.t {
  background-position: 165px 0;
  -moz-transform: rotateY(285deg) translateZ(124px);
  -webkit-transform: rotateY(285deg) translateZ(124px)
}
.u {
  background-position: 132px 0;
  -moz-transform: rotateY(300deg) translateZ(124px);
  -webkit-transform: rotateY(300deg) translateZ(124px)
}
.v {
  background-position: 99px 0;
  -moz-transform: rotateY(315deg) translateZ(124px);
  -webkit-transform: rotateY(315deg) translateZ(124px)
}
.w {
  background-position: 66px 0;
  -moz-transform: rotateY(330deg) translateZ(124px);
  -webkit-transform: rotateY(330deg) translateZ(124px)
}
.x {
  background-position: 33px 0;
  -moz-transform: rotateY(345deg) translateZ(124px);
  -webkit-transform: rotateY(345deg) translateZ(124px)
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0)
  }
  to {
    -moz-transform: rotateY(-360deg)
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0)
  }
  to {
    -webkit-transform: rotateY(-360deg)
  }
}

<div id="container">
  <h1>Image Wrapped Around A Spinning strip</h1>
  <div id="frame">
    <div class="strip">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
      <div class="k"></div>
      <div class="l"></div>
      <div class="m"></div>
      <div class="n"></div>
      <div class="o"></div>
      <div class="p"></div>
      <div class="q"></div>
      <div class="r"></div>
      <div class="s"></div>
      <div class="t"></div>
      <div class="u"></div>
      <div class="v"></div>
      <div class="w"></div>
      <div class="x"></div>
    </div>
  </div>
</div>

background, background-color, background-image , .strip .a, .b, .c .., background-position .

.strip div {
  position: absolute;
  background-color: #000; /* changed */
  background-image: url(http://baloziproductions.com/thailand-sunrise.jpg); /* changed */
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}

: ( longhand .strip div .strip .a, .b ..)

body {
  background: #000;
  color: rgb(236, 132, 57)
}
h1 {
  font: small-caps 167% Arial, Helvetica, sans-serif
}
#container {
  text-align: center;
  margin: 0 auto;
  top: 450px;
  width: 550px;
  -moz-perspective: 900px;
  -webkit-perspective: 900
}
#container:hover * {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused
}
#frame {
  width: 33px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* translate must be last */
  -moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
  -webkit-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px)
}
.strip {
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-animation: spin 25s infinite linear;
  -webkit-animation: spin 25s infinite linear
}
.strip div {
  position: absolute;
  background-color: #000;
  background-image: url(http://baloziproductions.com/thailand-sunrise.jpg);
  border: solid rgb(145, 87, 0);
  border-width: thin 0;
  height: 320px;
  width: 34px;
  opacity: 1;
}
.a {
  background-position: 0 0;
  -moz-transform: rotateY(0deg) translateZ(124px);
  -webkit-transform: rotateY(0deg) translateZ(124px)
}
.b {
  background-position: 759px 0;
  -moz-transform: rotateY(15deg) translateZ(124px);
  -webkit-transform: rotateY(15deg) translateZ(124px)
}
.c {
  background-position: 726px 0;
  -moz-transform: rotateY(30deg) translateZ(124px);
  -webkit-transform: rotateY(30deg) translateZ(124px)
}
.d {
  background-position: 693px 0;
  -moz-transform: rotateY(45deg) translateZ(124px);
  -webkit-transform: rotateY(45deg) translateZ(124px)
}
.e {
  background-position: 660px 0;
  -moz-transform: rotateY(60deg) translateZ(124px);
  -webkit-transform: rotateY(60deg) translateZ(124px)
}
.f {
  background-position: 627px 0;
  -moz-transform: rotateY(75deg) translateZ(124px);
  -webkit-transform: rotateY(75deg) translateZ(124px)
}
.g {
  background-position: 594px 0;
  -moz-transform: rotateY(90deg) translateZ(124px);
  -webkit-transform: rotateY(90deg) translateZ(124px)
}
.h {
  background-position: 561px 0;
  -moz-transform: rotateY(105deg) translateZ(124px);
  -webkit-transform: rotateY(105deg) translateZ(124px)
}
.i {
  background-position: 528px 0;
  -moz-transform: rotateY(120deg) translateZ(124px);
  -webkit-transform: rotateY(120deg) translateZ(124px)
}
.j {
  background-position: 495px 0;
  -moz-transform: rotateY(135deg) translateZ(124px);
  -webkit-transform: rotateY(135deg) translateZ(124px)
}
.k {
  background-position: 462px 0;
  -moz-transform: rotateY(150deg) translateZ(124px);
  -webkit-transform: rotateY(150deg) translateZ(124px)
}
.l {
  background-position: 429px 0;
  -moz-transform: rotateY(165deg) translateZ(124px);
  -webkit-transform: rotateY(165deg) translateZ(124px)
}
.m {
  background-position: 396px 0;
  -moz-transform: rotateY(180deg) translateZ(124px);
  -webkit-transform: rotateY(180deg) translateZ(124px)
}
.n {
  background-position: 363px 0;
  -moz-transform: rotateY(195deg) translateZ(124px);
  -webkit-transform: rotateY(195deg) translateZ(124px)
}
.o {
  background-position: 330px 0;
  -moz-transform: rotateY(210deg) translateZ(124px);
  -webkit-transform: rotateY(210deg) translateZ(124px)
}
.p {
  background-position: 297px 0;
  -moz-transform: rotateY(225deg) translateZ(124px);
  -webkit-transform: rotateY(225deg) translateZ(124px)
}
.q {
  background-position: 264px 0;
  -moz-transform: rotateY(240deg) translateZ(124px);
  -webkit-transform: rotateY(240deg) translateZ(124px)
}
.r {
  background-position: 231px 0;
  -moz-transform: rotateY(255deg) translateZ(124px);
  -webkit-transform: rotateY(255deg) translateZ(124px)
}
.s {
  background-position: 198px 0;
  -moz-transform: rotateY(270deg) translateZ(124px);
  -webkit-transform: rotateY(270deg) translateZ(124px)
}
.t {
  background-position: 165px 0;
  -moz-transform: rotateY(285deg) translateZ(124px);
  -webkit-transform: rotateY(285deg) translateZ(124px)
}
.u {
  background-position: 132px 0;
  -moz-transform: rotateY(300deg) translateZ(124px);
  -webkit-transform: rotateY(300deg) translateZ(124px)
}
.v {
  background-position: 99px 0;
  -moz-transform: rotateY(315deg) translateZ(124px);
  -webkit-transform: rotateY(315deg) translateZ(124px)
}
.w {
  background-position: 66px 0;
  -moz-transform: rotateY(330deg) translateZ(124px);
  -webkit-transform: rotateY(330deg) translateZ(124px)
}
.x {
  background-position: 33px 0;
  -moz-transform: rotateY(345deg) translateZ(124px);
  -webkit-transform: rotateY(345deg) translateZ(124px)
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0)
  }
  to {
    -moz-transform: rotateY(-360deg)
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0)
  }
  to {
    -webkit-transform: rotateY(-360deg)
  }
}

<div id="container">
  <h1>Image Wrapped Around A Spinning strip</h1>
  <div id="frame">
    <div class="strip">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
      <div class="k"></div>
      <div class="l"></div>
      <div class="m"></div>
      <div class="n"></div>
      <div class="o"></div>
      <div class="p"></div>
      <div class="q"></div>
      <div class="r"></div>
      <div class="s"></div>
      <div class="t"></div>
      <div class="u"></div>
      <div class="v"></div>
      <div class="w"></div>
      <div class="x"></div>
    </div>
  </div>
</div>

Excessive CSS3 selector qualifications needed for background positioning?

More articles: