Changing css of single li element

Question

Is it possible to change edit the css of only 4th tab of this li menu. If so, how?

All help appreciated. Thank you!

<div class="rt_tabs clearfix  left tab-style-2" id="single-product-details" data-tab-style="tab-style-2">
  <ul class="tab_nav hidden-xs">
    <li class="tab_title  active" id="tab-1-title" data-tab-number="1"><span class="icon-lightbulb"></span>TAB 1</li>
    <li class="tab_title " id="tab-2-title" data-tab-number="2"><span class="icon-home"></span>TAB 2</li>
    <li class="tab_title " id="tab-3-title" data-tab-number="3"><span class="icon-plus-circled"></span>TAB 3</li>
    <li class="tab_title " id="tab-4-title" data-tab-number="4"><span class="icon-mail-1"></span>TAB 4</li>
  </ul>

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-20 14:51:48Z

3

You can use :nth-child(4), in the case you want the 4th child of anything:

.rt_tabs li:nth-child(4) {
  background: #99c;
}

<div class="rt_tabs clearfix  left tab-style-2" id="single-product-details" data-tab-style="tab-style-2">
  <ul class="tab_nav hidden-xs">
    <li class="tab_title  active" id="tab-1-title" data-tab-number="1"><span class="icon-lightbulb"></span>TAB 1</li>
    <li class="tab_title " id="tab-2-title" data-tab-number="2"><span class="icon-home"></span>TAB 2</li>
    <li class="tab_title " id="tab-3-title" data-tab-number="3"><span class="icon-plus-circled"></span>TAB 3</li>
    <li class="tab_title " id="tab-4-title" data-tab-number="4"><span class="icon-mail-1"></span>TAB 4</li>
  </ul>

Other ways to do (in this particular example):

Use the id: #tab-4-title {}.
Use the attribute selector: [data-tab-number="4"] {}.

answered Jan 20, 2016 at 14:51

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anba · Accepted Answer · 2016-01-20 14:54:07Z

0

.tab_nav li:nth-child(4) targets the 4th li child of .tab_nav. Or in this case .tab_nav li:last-child should also work.

More information on nth-child: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

answered Jan 20, 2016 at 14:54

anba

3214 silver badges6 bronze badges

Comments

ishaan · Accepted Answer · 2016-01-20 15:00:35Z

0

Your element already has an id, so its easy

#tab-4-title{
        /*Whatever change you want*/
    }

edited Jan 20, 2016 at 15:00

answered Jan 20, 2016 at 14:52

ishaan

2,0511 gold badge20 silver badges32 bronze badges

7 Comments

Praveen Kumar Purushothaman Over a year ago

Code snippet must be used when you have something that has both HTML, CSS, or something that shows a working demo.

ishaan Over a year ago

Didn't know. Edited it. Although now it looks like i've left comments all over. Is there a way to write code snippets for CSS but not working code?

Burcak Over a year ago

Hey your code solved it for me! Thank you very much!

Praveen Kumar Purushothaman Over a year ago

@ishaan I made it right for you and you again screwed up. LoL. :)

ishaan Over a year ago

Ohh I do that quite often. :P

|

Thorsten Schleppi · Accepted Answer · 2016-01-20 15:19:09Z

0

Use the id:

#tab-4-title {...}

Use a attribute selector:

[data-tab-number="4"] {...}

Use a pseudo-selector:

li:nth-child(4) {...}
li:last-child {...}
li:nth-last-child(1) {...}
li:last-of-type {...}

There are several other possibilities.

answered Jan 20, 2016 at 15:19

Thorsten Schleppi

13 bronze badges

Collectives™ on Stack Overflow

Changing css of single li element

4 Answers 4

Comments

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related