Multiple tables formatted, not just MMM-Gas

ankonaskiff17

I applied some CSS to the MMM-Gas table and all was looking good until I looked at all the other tables on my MM and they all took the same formatting as MMM-Gas even though I directly named the module as shown in this code snippet. I thought that by addressing each item as shown in first CSS would prevent that. Shouldn’t the other tables have used whatever was configured in to their module code and CSS?
.MMM-Gas {
something something
}
would have prevented that.
I turned off the CSS for MMM-Gas and the other tables reverted to their expected format, Below is CSS for couple of items. How do I format JUST the MMM-Gas table?

/* ###MMM-Gas Formatting###
.MMM-Gas .table {
position: relative;
left: 20px;
width: 95%;
}

.MMM-Gas th {
position: relative;
padding: 0;
text-align: left;
font-size: 20px;
}

cowboysdude

@ankonaskiff17

Try

MMM-Gas .table {
position: relative;
left: 20px;
width: 95%;
}

ankonaskiff17

@cowboysdude I already have that in place.

sdetweil

@ankonaskiff17 what your css said was

for the module (space)
if it uses .table class
adjust like so

what u didn’t catch was (space) .table means .table for EVERY occurance

selectors are ALWAYS all matching, document wide

so u need to remove the space,
or
provide some more operators that will make the selector more specific, > and or ~

(on my phone at the moment, will try when I get to the computer)

sdetweil

@ankonaskiff17

works better if you use the table TAG instead of the class

.MMM-gas table

ankonaskiff17

@sdetweil So should be either .MMM-Gas.table { } or .MMM-Gas table { }? What is the preferred way?

sdetweil

@ankonaskiff17 .table is class

so

.MMM-gas table {
}

sdetweil

@ankonaskiff17 preferred is the way that works