Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

nth-child troubles

Status
Not open for further replies.

tyutghf

Technical User
Apr 12, 2008
258
0
0
GB
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?

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}
 
Hi

Than what are those +9 doing there ?
CSS:
[teal].gallery[/teal][teal]-[/teal]item [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery1.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]2[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery2.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]3[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery3.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]4[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery4.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]5[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery5.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]6[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery6.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]7[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery7.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]8[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery8.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]9[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery9.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal]+[/teal]10[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery10.jpg[/color]); [teal]}[/teal]
[teal].gallery[/teal][teal]-[/teal]item[teal]:[/teal]nth[teal]-[/teal]child[teal]([/teal]11n[teal])[/teal] [teal]{[/teal] [COLOR=coral]background:[/color] [COLOR=darkgoldenrod]url[/color]([COLOR=darkgoldenrod]images[/color]/[COLOR=darkgoldenrod]gallery11.jpg[/color]); [teal]}[/teal]

Feherke.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top