Twitter Bootstrap Question posted in

How to set border-radius conditionally? – Twitter bootstrap

I am using twitter bootstrap’s nav-tabs. I would like to make all the corners of tab-contentrounded except when the first tab is selected.

So basically in this case when the first <li> has active class then .tab-content‘s border-top-left-radius should be nothing.

I am not sure how do i conditionally set the styles just for 1st tab?

Here is the JSFiddle Demo

Update 1

Ok i got it working by setting styles on individual tab-pane

.tab-pane:not(:first-child) {
    background-color: rgb(241, 241,241);        
    border-radius: 5px;
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;  
}

.tab-pane:first-child{
    background-color: rgb(241, 241,241);  
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;          
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;  
}

i was wondering if i can avoid repetition and combine?

new jsfiddle demo

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Ok finally i got it working 

    .tab-pane {
    background-color: rgb(241, 241,241);        
    border-radius: 5px;
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;  
}

.tab-pane:first-child{    
    border-top-left-radius: 0px;
}

    here is working JSFiddle


  2. 0

    You can do this by either using JavaScript or moving the tab-content inside of the <ul> .nav

    Your updated JSFiddle

    After you move the content inside the nav, you can add this

    .tab-content {
    clear: both;
}

li:nth-of-type(1).active ~ .tab-content {
  border-top-left-radius: 0
}
    Login or Signup to reply.
  3. 0

    Just do this,
    apply

    ul#main-nav li:first-child.active{

    border-top-left-radius:0;

    border-bottom-left-radius:0;

    }

    alternatively:

    ul#main-nav li:first-child.active{

    border-radius:0 10px 10px 0;

    }

    Login or Signup to reply.
  4. 0

    I would try moving the styles from .tab-content down into .tab-pane and then you can use child selectors for each .tab-pane.

    .tab-pane {
    background-color: rgb(241, 241,241);        
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;
}
.tab-pane.active:first-child {
  border-radius: 0 5px 5px 5px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search