CSSのドット(.)とシャープ(#)の違い

CSSのドット(.)とシャープ(#)の違い

cssファイルに.aaaという表記と#aaaという表記方法があります。

これはhtmlファイル側のid属性の場合は#、class属性の場合は.となります。

#の方をidセレクタ、.の方をclassセレクタと言います。

サンプルのhtmlです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="sample6.css">
</head>
<body>
<div class="danraku">
文章~<br>
文章~<br>
文章~<br>
</div>
<br>
<div id="danraku">
文章~<br>
文章~<br>
文章~<br>
</div>
</body>
</html>

cssは以下です。

.danraku{
  border:1px dotted;
}

#danraku{
  border:1px dashed;
}

jQueryと同じですね。

ちなみに以下は同じ意味のようで、ただ単にアスタリスク(*)が省略されているだけだそうです。

*なし*あり
.danraku*.danraku
#danraku*#danraku

サンプル

コメント

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