多重条件セレクタ

CSS入門

 
■概要
 
CSSセレクタにも、ANDとORなどの選択肢を一部使えます。

タグ名#ID { 属性1: 値1; }
タグ名.クラス名 { 属性2: 値2; }
.クラス名#ID { 属性3: 値3; }

セレクタ間の空白が無い場合は、複数のセレクタが同時に設定された場合に適用できるスタイルを作成することができます。(AND演算)

#ID, .クラス名 { 属性1: 値1; }
タグ名, .クラス名 { 属性2: 値2; }

カンマ(,)を使って二つのセレクタどちらにも適用できるスタイルも作成することができます。(OR演算)
 
 
■使用方法

タグ名#ID { 属性1: 値1; }
タグ名.クラス名 { 属性2: 値2; }

 
■例

<html>
<head>
 <style>
  div#m_box{ width:220px; height:150px; border: 1px solid yellow }
  div.box{ background-color:blue; }
 </style>
</head>
<body>
 <div id=”m_box”>m_box IDの div です。</div>
 <div class=”box”>box クラスの div です。</div>
 <span id=”m_box”>m_box IDの span です。</span>
 <span class=”box”>box クラスの span です。</span>
</body>
</html>

出力結果

m_box IDの div です。
box クラスの div です。

m_box IDの span です。box クラスの span です。

 
 
 
 

当サイトは広告を含めています。広告のクリックによる収益は全て当サイトの管理、維持、コンテンツ製作に使われます。

 

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