お世話になります。

サイト全体のフォントをCSSで以下のようにゴシック設定しています。
* {
font-family: sans-serif;
}

小説のテキストだけ明朝体にしたいのですが、以下のように設定して#text#を<div>でくくると、小説は明朝体になるのですが、<ruby>や<span>で囲まれた文字だけゴシック体で残ってしまいます。
.mincho {
font-family: serif;
}


#text#のスタイルは、#txtのidにJavascriptで.minchoをつけたり外したりしてユーザーがフォントを選べるようにしたいので、できればあちこちにclass設定をしないで済む解決方法があると助かるのですが…。

お分かりになる方いたら教えていただけますでしょうか。
よろしくお願いします。