同じスタイルを複数のセレクタに適応させたい場合は、セレクタ間を , (コンマ)で区切ってセレクタを複数記入していきます。
外部リンク参考サイトさん 複数のセレクタに同じスタイルを設定する(プロパティ:値)を;(セミコロン)で区切ります。
ユニバーサルセレクタ
アスタリスク(*)ですべての要素に適用することができます。
サイト全体や要素全体など。
*{ } 要素*{ }
後にあるものが優先度が高い。上から下へCSSを読んだ時に記述的に下にあるもの
タイプセレクタとclassセレクタではclassセレクタが優先される.指定したセレクタの下の階層にある要素にスタイルを適用します。
外部リンク参考サイトさん 子孫セレクタについて適用させたいセレクタの上の階層セレクタ 適用させたいセレクタ {プロパティ名:値;}
セレクタを「>」で区切ると、直下の階層の要素のみスタイルを適用します。
親要素>子要素
要素{プロパティ名:値;}
外部リンク参考サイトさんいろいろな擬似クラスの設定a:link{プロパティ名:値;} | 未訪問リンクのクラス |
a:visited{プロパティ名:値;} | 訪問済みリンクのクラス |
a:active{プロパティ名:値;} | クリック時のクラス |
a:hover{プロパティ名:値;} | カーソルが乗ったときのクラス |
カーソルなどが乗ったときのスタイルを指定します。
要素:hover{プロパティ名:値;}
:hover{ }ではカーソルは乗っているがクリックはされていない状態。オンマウス時に{プロパティ名:値;}のようにするということ
リンク使用が多いがdiv、classでも利用できます。IE6では不可。親要素 子要素:hover{プロパティ名:値;} 親要素の中の子要素だけ、マウスオーバーされるとプロパティが変わる。
要素(divタグなど)の前後にテキストやアイコンを挿入することができる。
中身を指定するcontentプロパティの指定が必要です。pやhなどブロック要素の最初の行に色や大きさなどスタイルを適用します。インライン要素には適用できない。
要素:first-line { プロパティ: 値; }
ブロック要素の最初の文字に色や大きさなどのスタイルを適用します。
ブロック要素:first-letter{ プロパティ: 値; }クラスに適用 要素に.ドットとクラス名を付ける。 要素.クラス名:first-letter {太さや色など適用したいスタイル}
外部リンク参考サイトさん 擬似要素