[SOLVED] Style a class only inside a table

Style a class only inside a table

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?

Solution

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>