[AlanHK]

I was looking at an ePub with these styles:
(passes ePubCheck , no warnings).

.width-auto-rw .pc-rw { width: auto; }
.width-10-rw { width: 9%; }
.pc-rw { margin: 0; padding: 0; }
.pc-rw img { width: 100%; margin: 0; padding: 0; }
.pc-rw table { width: 100%; margin: 0; padding: 0; }
.pc-rw p { text-align: left; }

Used e.g. here to display an ornament:

<div class="width-10-rw">
               <div class="pc-rw"><img alt="" src="../Images/orncenter.gif"/></div>
            </div>

I run "Delete unused stylesheet classes" and the styles are reduced to

.width-auto-rw .pc-rw { width: auto; }
.width-10-rw { width: 9%; }
.pc-rw { margin: 0; padding: 0; }

The display of the image using the code above is now messed up, as it is not constrained by "width: 100%;".

It's very confusing to me all the definitions of "pc-rw" and it seems it also confused "Delete unused stylesheet classes".

I understand that
.a, .b, .c {margin: 0;}
means three identical styles. And
table.a {color: red;}
p.a {color:blue;}

makes two different styles, one for each of the base styles named.
But what does omitting the comma do?


Also, after doing the "Remove", the display in Sigil was unchanged.
I opened a few chapters to check and they all looked unchanged, so I felt safe to commit and saved the file. Then the image size went whacky.

Fortunately I had a backup of the file to restore the missing styles and try to work out what had gone wrong.

I know that the CSS is bizarre, but it is valid.
Trying to simplify it is why I start with "Remove".