CODEWITHSUNDEEP
cssborder
silkfire
silkfire

Reputation: 25935

No left border to the right of certain class

Is there any way to specify with CSS to disable a left-border to the right of a cell with a certain class?

As you can see in this image the border to the right is double, it has the border of class "selected" plus the default gray border. I want the "selected" cell's right border to override the neighboring cell's left-border somehow.

FWIW, I think this is because of the table's CSS where I have commented 'border-collapse'. I need to do this otherwise I can't have rounded corner's on the table.

enter image description here

.ui-tabs-panel td {   /*  default table cell */
    border-bottom: 1px solid #E9EBDF;
    border-left: 1px solid #E9EBDF;
    padding: 7px 7px;
    font-family: Tahoma;
    cursor: default;
    background-color: #FAFDFF;
}

.ui-tabs-panel td.selected {  /* when selected */
    border-right: 1px solid #94DFEB !important;
    border-left: 1px double #94DFEB !important;

    background-color: #FFF !important;
    color: #087DBD;
}

Upvotes: 0

Views: 57

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99464

It seems, the current extra border belongs to the next <td> element, Try this to clear the border:

.ui-tabs-panel td.selected + td {
    border-left: none;
}

You can select the next sibling element by Adjacent sibling combinator

element1 + element2 Selects every element2 element that are placed immediately after element1 element(s). They're siblings.

Upvotes: 2

Related Questions