Style a class only inside a table

45
July 11, 2019, at 9:50 PM

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; }

READ ALSO
Can&#39;t use ghostscript gswin64c to convert a pdf file into image using PHP

Can't use ghostscript gswin64c to convert a pdf file into image using PHP

I am trying to convert a pdf into an image using PHPPlatform is windows

51
How to restrict unsuitable requests using validation rules in Laravel 5.8?

How to restrict unsuitable requests using validation rules in Laravel 5.8?

I have only one validation rule in my Laravel project:

65
Sort result with empty strings last

Sort result with empty strings last

I have this locations table:

67