CODEWITHSUNDEEP
cssrr-markdown
Cettt
Cettt

Reputation: 11981

coloring tabs in rmarkdown

consider the following rmarkdown file:

---
title: "tab colors"
output: 
  html_document:
    self_contained: no
---
<style>
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #990000;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    color: #ffffff;
    background-color: #990000;
}
</style>


#{.tabset .tabset-fade .tabset-pills}

##Tab red

Tab red

##Tab green

Tab green

I was able to change the color of all tabs by adding some css in the beginning. However, I would like the second tab (tab green) to have a different color.

I experimented a little bit and tried to create a different html-class for the second section by manually adding some html tag like

<a_green role="tab" data-toggle="tab" href="#tab-green" aria-controls="tab-green">tab green</a_green>

But this did not had the desired effect.

Can anyone help me out?

Upvotes: 1

Views: 3127

Answers (1)

kabr
kabr

Reputation: 1339

You can work with the nth() child CSS selector https://www.w3schools.com/cssref/sel_nth-child.asp

In your case add this within the <style> tag: 

.nav-pills>li:nth-child(2) {
    background: green;
 }

Upvotes: 4

Related Questions