Modifying style of parent div through css class in child div

Question

I am using slick grid. Which applies slick-cell class on each cell in the grid. On one of cell I have added a another div and a class by name red-bg. See the below image for more information.

enter image description here

See the below image for more info on slick-cell class enter image description here

Problem: slick-cell class is adding padding to the cell. How can I though red-bg class, force to over-write style in slick-cell class. I want to over-write padding class.

score 0 · Answer 1 · answered Oct 16 '14 at 14:06

0

padding-top : 3px !important

padding : 0px in red class will overwrites

important overwrite other css

answered Oct 16 '14 at 14:06

Gurkan İlleez

1,503
1
10
12

I want to remove padding and margin from the cell. How will using `padding-top : 3px !important` will help ? – SharpCoder Oct 16 '14 at 14:09
red-bg{ padding:0px; } – Gurkan İlleez Oct 16 '14 at 14:11

score 0 · Answer 2 · answered Oct 16 '14 at 14:09

Put simply, you can't. CSS cascades from Parent to Child. You cannot target the parent from the child only the opposite way around or sibling to sibling.

A hack would be to negate the parent's padding on red-bg by putting a minus margin on red-bg. If slick-cell has padding-top: 10px you could theoretically do:

.red-bg {
    margin-top: -10px;
}

This becomes slightly more complicated if slick-cell has padding all around

Modifying style of parent div through css class in child div

2 Answers2