Extreme NTH Child Tricks

Hi again! This time i will share an extreme way to use nth-child css.

If you never use this code before, then please check the example below:

<style type="text/css">

.test li:nth-child(3) {
     color: red;
}

</style>

<ul class="test">
    <li>Sample #1</li>
    <li>Sample #2</li>
    <li>Sample #3</li>
    <li>Sample #4</li>
    <li>Sample #5</li>
</ul>

With those codes, you will made the text of third list item become red colored. But how, if you made the some more div inside the list?

<ul class="test">
    <li><span class="insider">Sample #1<span><b>this is the magic</b></li>
    <li><span class="insider">Sample #2<span><b>this is the magic</b></li>
    <li><span class="insider">Sample #3<span><b>this is the magic</b></li>
    <li><span class="insider">Sample #4<span><b>this is the magic</b></li>
    <li><span class="insider">Sample #5<span><b>this is the magic</b></li>
</ul>

As you know, the basic nth-child code only affect if you target the list, but how if i want only the third .insider which have red background? It is simple, you can use this code

<style type="text/css">

.test li:nth-child(3) span.insider {
     background: red;
}

</style>

Done, simple isn’t it? If you want to get more nth-child reference, you can check this blog

Advertisements

4 thoughts on “Extreme NTH Child Tricks

  1. Hiya, I’m definitely glad I have located this data. Today bloggers publish only about gossips and web and this really is actually irritating. A good net web site with interesting content material, that’s what I will need. Thanks for keeping this net web-site, I will be visiting it. Do you do newsletters? Can’t come across it.

  2. Hey! This is kind of off topic but I need some guidance from
    an established blog. Is it tough to set up your own blog?
    I’m not very techincal but I can figure things out pretty fast. I’m thinking about making my own but I’m not sure where to start. Do you have any tips or suggestions? Appreciate it

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s