1. 概要
いきなり実戦から CSS を書き始めて、使用しているもので、セレクタの区別もようついていないのにあれこれとかき分けているのです。
あんまりなので、理解を深めるためにも少し整理してみます。
いっぱいあるので、わたしが使っているものしか整理できそうにない・・・。
2. 全称セレクタ・要素型セレクタ
これは使っていませんが、全称セレクタと言って
* { プロパティ名: 値; }
という書き方ができるらしい。
これはすべての要素に対する定義となるらしい。
これに対して
body { width: 100%; }
のように、特定の要素（タグ？）に指定するものを要素型セレクタと言うらしい。
3. class セレクタ
これは結構使っておりますです。
.classname { style properties }
↓こう書くのと同じ意味なんですって
[class~=classname] { style properties }
ってやつです。
わたしは、要素型セレクタと組み合わせて
span.blue {
color: #0000FF;
font-weight: bold;
}
とか書いてます。
これを一番多用しているように思います。
<span class="blue">とか書くと青太文字になる。</span>
っていう .html を書くとこうなります。
↓
とか書くと青太文字になる。
4. id セレクタ
これはあんまり使っていないですね。
#id_value { style properties }
↓こう書くのと同じ意味なんですって
[id=id_value] { style properties }
span#identified {
background-color: DodgerBlue;
}
っていう .css を書いて
<span id="identified">テキストを伴った span 要素です。</span>
<span>別な span 要素です。</span>
っていう .html を書くとこうなります。
↓
テキストを伴った span 要素です。
別な span 要素です。
5. [attr=value] 属性セレクタ
これは使ってます。
input[type=submit] {
width: 88px;
height: 31px;
font-family: "Sawarabi Gothic", "Rounded Mplus 1c", "Noto Sans JP", "Noto Sans Japanese", "Mplus 1p", "ＭＳ ゴシック", sans-serif;
cursor: pointer;
display: table-cell;
vertical-align: middle;
font-size: 12px;
line-height: 100%;
color: white;
text-shadow: 1px 1px 0px #000000;
font-weight: bold;
background: linear-gradient(135deg, #0000FF, #FFFFFF);
}
こんなん使ってます。ボタンの形状を画像使わずに書いてるんですがね。
このサイトの各ページの下の方にあるでしょ？
<input type="submit" class="page" value="戻 る" onclick="location.href='./'">
って書くと下のように表示されるわけです。
6. :name 疑似クラス
これも使ってます。
a:hover {
background-color: #CDE8FF;
color: #FF0000;
text-decoration: none;
}
こんなんして、リンクの上にカーソルが乗ると背景がつくようにしています。
<a href="#6.">6. :name 疑似クラス</a>
って書くと下の文字列の上にカーソルを乗せると背景がつくでしょ。
6. :name 疑似クラス
これで注意が必要なのは、: の後ろには空白をいれずに name を定義しないと無効になってしまうことです。
