セレクタpc操作中



目次

擬似要素
のとこへ
子孫セレクタ
のとこへ

セレクタきほん

セレクタとは スタイルを設定したい対象のこと。要素ともいう。
外部リンク参考サイトさん ・css基本 セレクタ&プロパティ
 ・いろいろなセレクタ  ・最新セレクタ    ・最新セレクタ豊富
セレクタ , セレクタ{プロパティ:値;}

同じスタイルを複数のセレクタに適応させたい場合は、セレクタ間を , (コンマ)で区切ってセレクタを複数記入していきます。

外部リンク参考サイトさん 複数のセレクタに同じスタイルを設定する
セレクタ{プロパティ:値;プロパティ:値;} セレクタに複数のスタイルを設定するには、

(プロパティ:値)を;(セミコロン)で区切ります。

タイプセレクタ h1やpなどを適用

ユニバーサルセレクタ アスタリスク(*)ですべての要素に適用することができます。
サイト全体や要素全体など。 *{ } 要素*{ }

優先順位

後にあるものが優先度が高い。上から下へCSSを読んだ時に記述的に下にあるもの

タイプセレクタとclassセレクタではclassセレクタが優先される.

子孫セレクタ

指定したセレクタの下の階層にある要素にスタイルを適用します。

外部リンク参考サイトさん 子孫セレクタについて
親要素 子要素 親セレクタ(親要素)と子孫セレクタ(子要素)の間は、半角スペースを開けます。

適用させたいセレクタの上の階層セレクタ 適用させたいセレクタ {プロパティ名:値;}

子セレクタ 子要素だけにスタイルを指定できるセレクタです。

セレクタを「>」で区切ると、直下の階層の要素のみスタイルを適用します。

親要素>子要素

擬似クラス

要素{プロパティ名:値;}

 外部リンク参考サイトさんいろいろな擬似クラスの設定

リンクに関するクラス

a:link{プロパティ名:値;} 未訪問リンクのクラス
a:visited{プロパティ名:値;} 訪問済みリンクのクラス
a:active{プロパティ名:値;} クリック時のクラス
a:hover{プロパティ名:値;} カーソルが乗ったときのクラス

:hover{プロパティ名:値;}

カーソルなどが乗ったときのスタイルを指定します。

要素:hover{プロパティ名:値;}

:hover{ }ではカーソルは乗っているがクリックはされていない状態

オンマウス時に{プロパティ名:値;}のようにするということ

リンク使用が多いがdiv、classでも利用できます。IE6では不可。

親要素 子要素:hover{プロパティ名:値;}  親要素の中の子要素だけ、マウスオーバーされるとプロパティが変わる。

:before{content:}や:after{content:}

擬似要素

1 個のコロン (:) が使われたり、2 個のコロン (::) が使用されたりする。
要素の一部に対して影響を与える事ができるのが擬似要素。

:before :after

要素(divタグなど)の前後にテキストやアイコンを挿入することができる。

中身を指定するcontentプロパティの指定が必要です。

:first-line

pやhなどブロック要素の最初の行に色や大きさなどスタイルを適用します。インライン要素には適用できない。

要素:first-line { プロパティ: 値; }

:first-letter

ブロック要素の最初の文字に色や大きさなどのスタイルを適用します。

ブロック要素:first-letter{ プロパティ: 値; }

クラスに適用  要素に.ドットとクラス名を付ける。  要素.クラス名:first-letter {太さや色など適用したいスタイル}

外部リンク参考サイトさん 擬似要素