I have a gallery and want to style each element differently, so the first looks a certain way, the second differently etc. I have 11 styles in total so I want each element to be styled differently until the 12th which looks like the first, 13th which looks like the second etc.
I am struggling with the css for this, can someone help?
I am struggling with the css for this, can someone help?
Code:
.gallery-item {text-align: left; margin: 0px; background: transparent url(images/gallery1.jpg) no-repeat; width: 295px; height: 245px; padding: 72px 0px 0px 28px}
.gallery-item:nth-child(2n+9) {background: transparent url(images/gallery2.jpg) no-repeat; width: 271px; height: 183px; padding: 10px 0px 0px 8px}
.gallery-item:nth-child(3n+9) {background: transparent url(images/gallery3.jpg) no-repeat; width: 292px; height: 205px; padding: 25px 0px 0px 30px}
.gallery-item:nth-child(4n+9) {background: transparent url(images/gallery4.jpg) no-repeat; width: 252px; height: 172px; padding: 50px 0px 0px 20px}
.gallery-item:nth-child(5n+9) {background: transparent url(images/gallery5.jpg) no-repeat; width: 291px; height: 253px; padding: 67px 0px 0px 27px}
.gallery-item:nth-child(6n+9) {background: transparent url(images/gallery6.jpg) no-repeat; width: 279px; height: 204px; padding: 15px 0px 0px 19px}
.gallery-item:nth-child(7n+9) {background: transparent url(images/gallery7.jpg) no-repeat; width: 282px; height: 198px; padding: 18px 0px 0px 17px}
.gallery-item:nth-child(8n+9) {background: transparent url(images/gallery8.jpg) no-repeat; width: 265px; height: 147px; padding: 40px 0px 0px 10px}
.gallery-item:nth-child(9n+9) {background: transparent url(images/gallery9.jpg) no-repeat; width: 277px; height: 226px; padding: 65px 0px 0px 13px}
.gallery-item:nth-child(10n+9) {background: transparent url(images/gallery10.jpg) no-repeat; width: 291px; height: 231px; padding: 50px 0px 0px 26px}
.gallery-item:nth-child(11n+9) {background: transparent url(images/gallery11.jpg) no-repeat; width: 288px; height: 246px; padding: 60px 0px 0px 25px}