ホーム＞HTMLリファレンス（アルファベット検索）＞疑似クラス
link 疑似クラス …未訪問のリンクにデザインを加える
△ページトップへ / △ページ内リンクへ
visited 疑似クラス …訪問済みのリンクにデザインを加える
△ページトップへ / △ページ内リンクへ
hover 疑似クラス …要素の上にマウスポインタを合わせたとき、リンクのデザインを加える
△ページトップへ / △ページ内リンクへ
active 疑似クラス …要素がアクティブになったとき、リンクにデザインを加える
△ページトップへ / △ページ内リンクへ
focus 疑似クラス …入力欄などの要素にフォーカスがあったときとき、デザインを加える
△ページトップへ / △ページ内リンクへ
first-child 疑似クラス …ある要素が他の要素のはじめの子要素になっているときデザインを加える
△ページトップへ / △ページ内リンクへ
lang 疑似クラス …要素が何語で記述されているかによってデザインを加える
△ページトップへ / △ページ内リンクへ
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
a:link {
color: green;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
</style>
</head>
<!--ページの本文-->
<body>
<a href="../index.html">トップ</a>
</body>
|
|
△ページトップへ / △ページ内リンクへ
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
input:focus {
background-color: lightblue;
}
</style>
</head>
<!--ページの本文-->
<body>
<form action="sample.cgi" method="post">
ID：<input type="text" name="id" size="10">
パスワード：<input type="text" name="password" size="20"><br><br>
<input type="submit" value="送信">
</form>
</body>
</html> |
|
△ページトップへ / △ページ内リンクへ
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
.sample p:first-child {
background: url(point.gif) no-repeat;
padding-left: 20px;
}
</style>
</head>
<!--ページの本文-->
<body>
<h1 class="sample">見出しレベル１</h1>
<p>first-child 疑似クラスが適用されます。</p>
<p>first-child 疑似クラスが適用されません。</p>
<h2 class="sample">見出しレベル２</h2>
<p>first-child 疑似クラスが適用されます。</p>
<p>first-child 疑似クラスが適用されません。</p>
</body>
|
|
△ページトップへ / △ページ内リンクへ
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
p:lang(en) {
color: red;
}
</style>
</head>
<!--ページの本文-->
<body>
<p lang="en">English</p>
<p lang="ja">日本語に指定されているので適用されません。</p>
<p>言語を指定されていないので適応されません</p>
</body>
|
|
△ページ内リンクへ
△ページトップへ / △ページ内リンクへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
解説
link 
