CSSで複数のclassを同時に指定する方法

記事内に広告が含まれています。

CSSで複数のclassを同時に指定する

HTMLで1つの要素に同時に複数のスタイルを指定したい場合があります。
そんな時の対処方法です。

class属性をスペースで区切る

1つの要素に同時に複数のスタイルを指定するには
class属性に複数で区切ってを指定します。

<タグ class="prop1 prop2 ・・・>

具体的には背景色と線の色を複数のCSSで指定するには

<html>
    <head>
        <style type="text/css">
            .bg_color  { background-color:#fffacd;}
            .line_color{ border-color:#ff4500;}
        </style>
    </head>
    <body>
        <table border="1">
            <tr><td class="bg_color line_color">背景色と線の色を同時指定</td></tr>
        </table>
    </body>
</html>

のように「class=”bg_color line_color”」とそれぞれのスタイル名を
空白で区切って指定します。

タイトルとURLをコピーしました