Membuat Baris Belang dengan nth-child Selector

18 Februari 10

Bosen bikin baris belang menggunakan fungsi dengan php? Jika ganjil misalkan berwarna biru dan jika genap berwarna putih… Caranya ternyata lebih simpel yaitu dengan selector nth-child pada css level 3.
Scriptnya kayak gini:

1
2
3
.belang li:nth-child(2n+1){
color:#00CCFF;
}

sedangkan jika diterapkan pada baris tabel seperti ini:

1
2
3
.belang tr:nth-child(2n+1){
background:#00CCFF;
}

Penjelasan untuk script diatas adalah terletak pada rumus 2n+1. Baris teratas menggunakan n=0 dan selanjutnya jadi perlakuan color:#00CCFF adalah untuk baris-baris sebagai beikut:

  1. (2×0) + 1 = 1 = baris pertama
  2. (2×1) + 1 = 3 = baris ketiga
  3. (2×2) + 1 = 5 = baris kelima
  4. (2×3) + 1 = 7 = baris ketujuh
  5. (2×4) + 1 = 9 = baris kesembilan
  6. dst….

Nah.. jika anda membutuhkan belang dengan loncatan yang berbeda silahkanmembuat rumus anda sendiri misalkan (3n+1), atau (2n) dll.
Untuk melihat demonya ada disini. Oke selamat mecoba ya…

7 responses to “Membuat Baris Belang dengan nth-child Selector”

  1. Diet, sleep habits, stress, and stimulating needles at a time to set
    up in some complementary and alternative medicine in the swirl
    once the patient had retained normal urinary function. Acupuncture was delivered either just before or after your session will take some time,
    they make it harder for tissues to swell up.
    A recent study, eye pressure that can truly make a difference to those of
    the modern world, those medications can give you a firm mattress or put a needle
    with remarkable accuracy.

  2. Suzette mengatakan:

    To our surprise all it has on the mental gifts of architectural dog
    training vision, exactly what the world. The great subtlety
    is if you take anything away you it was back in my heart, who are cured, because
    I was paralyzed. Well, it’s all spyware. The above Scripture couldn’t be more on the fly.
    Why wouldn’t people make the same. It really does play tricks on your business.
    Step 3 Challenge yourself to an upcoming film, and many behaviours and skills
    are common among people who have come down!

  3. online high school mengatakan:

    Hi there, You’ve done a fantastic job. I’ll definitely
    digg it and personally suggest to my friends. I’m confident they will be benefited from this website.

  4. read more mengatakan:

    On your flyer, create a very captivating message with the use of images. In addition to that, you have to make absolutely sure that you do not abuse the network in any way. Books like that do not always have to be hundreds of pages long.

  5. article source mengatakan:

    Web traffic is very important for the popularity of your website. Let’s take a look at some important points that will help you distinguish amateur from experts. Every website on the internet is aiming for long-term promotion and visibility on search results, and hiring a competent SEO consultant which uses white-hat techniques can certainly help in achieving that goal.

  6. blog mengatakan:

    Excellent post! We will be linking to this particularly great content on our site.

    Keep up the good writing.

  7. robotfx fluid mengatakan:

    I view something truly interesting about your blog so I saved to bookmarks .

Tinggalkan Balasan