CSS selectors_html/css_WEB-ITnose の使い方まとめ

◆a:link 未訪問のリンクのセレクター。

a:link{color:red;}

◆a:visited 訪問済みリンクに使用されるセレクター。

a:visite{color:blue}

◆a:hover マウスカーソルが置かれているリンクに使用されるセレクター。

a:hover{color:yellow}

◆a:active フォーカスを取得する (例: クリックされた) リンクに使用されるセレクター。

a:active{color:pink}

7. 疑似要素セレクター

定義: ドキュメント ツリーにない一部の情報をフォーマットできるようにします。

ブラウザでサポートされているタイプは、first-line と first-letter の 2 つです。

first-line は要素の最初の行に使用されます。

例:

p:first-line{font-weight:bolder}

first-letter は要素の最初の文字に使用されます。

例:

p:first-letter{font-size:20px;}

概要:

基本セレクター:

1. 要素 (ラベル) セレクター: ラベル名に直接作用します。

2. クラス セレクター: ラベルにはクラス属性が必要であり、クラス属性値の前にドットを追加する必要があります。

3.id セレクター: ラベルには id 属性が必要で、id 属性値の前に # を追加する必要があります。

4. 属性セレクター: [] を使用してタグの属性/属性 = "値" を囲みます。

5. ワイルドカード セレクター: *{...} の形式。

複合セレクター:

1. 交差セレクター: 隣接して記述された 2 つ以上のセレクターを使用します (div.class{...})。

2. ユニオンセレクター: 2 つ以上のセレクターをカンマで区切って記述します。選択されたすべてのタグが適用されます (div、h1、.class、#div1{...})。

3. 背景セレクター: 2 つ以上のセレクターを一緒に記述し、最初のセレクターのすべての子孫セレクターが適用されます (div .class{...})。