CSS targeting and override the styles of an element using different rules

Question

I have two type of cells in my table.

1st type cells have the class name ".top"

2nd type cells have the class name ".top .selected"

My problem is I have to remove the border-top in my 2nd type of cells.

here is my code:but it not apply the 2nd code.

1st Type:

html body #ROOT tr.fare .top {
border-top: 3px solid #888888 !important;
}

2nd type:

html body #ROOT tr.fare .top .selected{
border-top: none !important;
}

I can not remove !important tag from 1st type.I want to override the 1st property and apply the 2nd type css.Please advice me, How to target strongly??

Danield · Accepted Answer · 2014-01-07 06:58:02Z

2

From your explanation it sounds like the cells which are selected have both classes top and selected.

In which case you rule should look like this:

html body #ROOT tr.fare .top.selected{ /* no space between top and selected */
    border-top: none;
}

The space makes a big difference.

.top .selected
{
  ...
}

The above selector means: Select all elements with the class name selected that are decendents of the element with an class top.

However the following selector

.top.selected
{
  ...
}

means: Select the element which has class selected and also a class name of top.

edited Jan 7, 2014 at 6:58

answered Jan 7, 2014 at 6:49

Danield

127k37 gold badges235 silver badges268 bronze badges

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

Comments

Richa · Accepted Answer · 2014-01-07 07:01:25Z

1

You should write this in CSS:

html body #ROOT tr.fare .top.selected{
border-top: none !important;
}

Remove space between .top and .selected

.top.selected = element which is having both the classes

.top .selected = .top element which is having inside another element with .selected class.

answered Jan 7, 2014 at 7:01

Richa

4,2605 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

CSS targeting and override the styles of an element using different rules

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related