Style a class only inside a table

Question

I'm using a CMS with predefined classes (cbFormFieldCell). So I can't change some class elements because they are used at some other parts of the website. If I change the format for every element of that class the website is broken.

I want to change the style of the class "cbFormFieldCell" only inside a <table class="tabelle">. Outside the table the other elements may not be changed.

.cbFormFieldCell { min-width: 300px; max-width: 300px; overflow: hidden;} 

That works for every class of the website. But some objects are broken.

Is it possible to do something like that:

Change only predefined class="cbFormFieldCell" elements in table class="tabelle"?

e.g.

.tabelle.cbFormFieldCell 
{ min-width: 300px; max-width: 300px; overflow: hidden; }

Can anyone help?

Answer 1

The 'space' between your CSS classes are used to target different elements. Below you will find an example what happens when you combine classes without or with spaces.

Hopefully this help you to understand how to target your element.

.parent-1 .child {
  color: green;
}

.parent-2.child {
  color: red;
}


/* addition styling */

p {
  padding: 20px;
  background-color: #eff0f1;
  border-radius: 10px;
}

<!-- Without container -->
<p class="child">No CSS rules are applied here.</p>

<!-- With containers -->
<div class="parent-1">
  <p class="child">This will be targeted: green</p>
</div>

<div class="parent-2">
  <p class="child">No CSS rules are applied here.</p>
</div>


<div class="parent-2 child">
  <p class="child">This will be targeted: red</p>
</div>

Answer 2

You can use css !important like this

.cbFormFieldCell { min-width: 300px !important; max-width: 300px !important; overflow: hidden !important;} 

"!important" makes css attribute to be first-level

Answer 3

You are concatenating the classes by writing them with no space, which basically means .tabelle.cbFormFieldCell will apply to an element that has BOTH those classes.

In order to target .cbFormFieldCell inside of .tabelle add a space between them like this .tabelle .cbFormFieldCell.

Or if it's a direct child of .tabelle, you can use the descendant selector like this .tabelle > .cbFormFieldCell

Answer 4

Thank you everyone!

I actually had to remove the space, use important and additionally use another default class.

.cbFormTableEvenRow .cbFormFieldCell { min-width: 100px !important; max-width: 100px !important; width: 100px !important; overflow: hidden !important; }