HTMLタグ(目的別)
HTMLタグ(ABC順)
HTML5(目的別)
HTML5(ABC順)
CSSプロパティ(目的別)
CSSプロパティ(ABC順)
CSS3(目的別)
CSS3(ABC順)
HTMLの基本
CSSの基本
チュートリアル
ウェブ制作TIPS
JavaScript
Canvas
HTML5 API
特殊文字
優良デザイン
WEBカラー
WEB画像
イラスト素材
コラム
about
サイトマップ
トップページ
>
スタイルシートリファレンス
>
属性セレクタ
★スタイルシートリファレンス
属性セレクタ …… 特定の属性を持つ指定要素にスタイルを適用する
広告
要素名[属性名] の形式の属性セレクタは、特定の属性を持つ指定要素を対象にスタイルを適用します。属性値は問いません。
■セレクタの書式・スタイルを適用する対象
書式
要素名[属性名] {プロパティ名:値;}
適用対象
特定の属性を持つ指定要素
■使用例
スタイルシート部分は外部ファイル(sample.css)に記述。
a[title] {background-color:yellow;}
HTMLソース
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p>
<a href="today.html" title="今日の天気予報はここをクリック!">今日のお天気</a><br>
<a href="tomorrow.html">明日のお天気</a><br>
<a href="yesterday.html">昨日のお天気</a><br>
</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
今日のお天気
明日のお天気
昨日のお天気
■関連項目
要素型セレクタ(タイプセレクタ)
…… 特定の要素にスタイルを適用する
全称セレクタ(ユニバーサルセレクタ)
…… すべての要素にスタイルを適用する
classセレクタ(クラスセレクタ)
…… 特定のclass名がつけられた要素にスタイルを適用する
idセレクタ
…… 特定のid名がつけられた要素にスタイルを適用する
:link擬似クラス
…… 未訪問のリンクにスタイルを適用する
:visited擬似クラス
…… 訪問済のリンクにスタイルを適用する
:hover擬似クラス
…… カーソルが乗っている要素にスタイルを適用する
:active擬似クラス
…… クリック中の要素にスタイルを適用する
:focus擬似クラス
…… フォーカスされた要素にスタイルを適用する
:lang擬似クラス
…… 特定の言語を指定された要素にスタイルを適用する
:first-child擬似クラス
…… 最初に現れる子要素にスタイルを適用する
:first-line擬似要素
…… 要素の最初の行にスタイルを適用する
:first-letter擬似要素
…… 要素の最初の文字にスタイルを適用する
:before擬似要素
…… 要素の直前に内容を挿入する
:after擬似要素
…… 要素の直後に内容を挿入する
属性セレクタ
…… 特定の属性を持つ指定要素にスタイルを適用する
属性(値)セレクタ
…… 特定の属性(値)を持つ指定要素にスタイルを適用する
属性(値候補)セレクタ
…… 属性値候補と一致した場合にスタイルを適用する
E[foo^="bar"]
…… foo属性の値がbarで始まるE要素
E[foo$="bar"]
…… foo属性の値がbarで終わるE要素
E[foo*="bar"]
…… foo属性の値にbarを含むE要素
E:root
…… 文書のルートとなる要素
E:nth-child(n)
…… n番目の子となるE要素
E:nth-last-child(n)
…… 後ろから数えてn番目の子となるE要素
E:nth-of-type(n)
…… n番目のその種類の要素
E:nth-last-of-type(n)
…… 後ろから数えてn番目のその種類の要素
E:last-child
…… 子として最後のE要素
E:first-of-type
…… 最初のその種類の要素
E:last-of-type
…… 最後のその種類の要素
E:only-child
…… 子として唯一となるE要素
E:only-of-type
…… 子として唯一となるその種類の要素
E:empty
…… 要素内容が空となるE要素
E:target
…… リンクのターゲット先となるE要素
E:enabled
…… 有効となっているユーザーインターフェース要素(テキストエリアなど)
E:disabled
…… 無効となっているユーザーインターフェース要素(テキストエリアなど)
E:checked
…… チェックされているユーザーインターフェース要素(ラジオボタン・チェックボックスなど)
E:not(s)
…… sで指定するセレクタに当てはまらないE要素
E ~ F
…… E要素の後ろにある同じ階層のF要素
複数のセレクタ
…… 複数のセレクタに同じスタイルを適用する
子孫セレクタ
…… 子孫要素にスタイルを適用する
子セレクタ
…… 子要素にスタイルを適用する
隣接セレクタ
…… 直後に隣接している要素にスタイルを適用する
広告
Sponsors
HTMLタグ(目的別)
HTMLタグ(ABC順)
HTML5(目的別)
HTML5(ABC順)
CSSプロパティ(目的別)
CSSプロパティ(ABC順)
CSS3(目的別)
CSS3(ABC順)
HTMLの基本
CSSの基本
チュートリアル
ウェブ制作TIPS
JavaScript
Canvas
HTML5 API
特殊文字
優良デザイン
WEBカラー
WEB画像
イラスト素材
コラム
about
サイトマップ
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ