この最後のセレクターのチュートリアルでは、特別なタイプのセレクターを紹介します。それは疑似クラスと疑似要素です。これらは、特定のHTML要素に対応しないセレクターであり、出力デバイスが生成します。
疑似クラスと疑似要素を使用すると、HTML要素で明確に表現できない要素にスタイルを適用できます。典型的な例は、まだ訪れていないハイパーリンクや最近クリックしたハイパーリンクです。
ハイパーリンクのスタイル設定
しばしば、ページのハイパーリンクをスタイル設定したい場合があります。CSSには、ハイパーリンクの異なる状態を取得して、視覚的に適応するための多くの方法が用意されています。
例えば、ハイパーリンクに赤いテキスト色を適用したい場合は、次のようになります：
a:link {
color: 赤色;
}
a:visited は、すでに訪れたハイパーリンクをマークします。以下の構文によって、クリックしたことのあるハイパーリンクを青色で表示できます。
a:visited {
color: 青色;
text-decoration: none;
}ブラウザ上では、次のように表示されます：
クリックされているハイパーリンクを個別にスタイル設定したい場合も可能です。
a:active {
font-weight: bold;
color: 青色;
text-decoration: none;
}
これには a:active の構文が使用されます。
a:hover の構文は、マウスポインターがハイパーリンク上にある状態を指します。また、a:focus という疑似要素もあります。これは、ハイパーリンクがフォーカスを受け取る瞬間を定義します。
その他の疑似要素
他の要素の一部にスタイルを適用できる疑似要素があります。その典型的な例は ::first-letter です。この疑似要素は、現在の要素の最初の文字を選択します。テキストを含むすべての要素に適用できます。ただし、疑似要素はすべてのセレクターの末尾にのみ書かれている必要があります。つまり、開始波括弧の前に配置されます。
h1::first-letter {
color: 青色;
}
::first-line を使用すると、要素の最初の行を選択できます。この疑似要素は、ブロックレベルの要素にのみ適用できます。例：
p::first-line {
background-blue;
}
そしてブラウザ上では、次のように表示されます：
一
:after と :before の両方の疑似要素を使用すると、要素の前後に追加コンテンツを表示できます。content で何を表示するかを指定できます。
• normal – 通常、定義された疑似要素は生成されません。
• none – 疑似要素は生成されません。
• <string> – ここで指定された文字列が表示されます。文字列は単一引用符または二重引用符で囲む必要があります。
• <uri> – 指定されたURIのリソースが挿入されます。
• <counter> – カウンターを定義するか特定のカウンターに言及します。
• attr(<identifier>) – 括弧内に指定された属性の値が挿入されます。
• close-quote – 終わりの引用符を挿入します。
• no-close-quote – 終わりの引用符は挿入されませんが、ネストの深さが +1 されます。
• no-open-quote – 開始の引用符は挿入されませんが、ネストの深さが +1 されます。
• open-quote – 開始の引用符を挿入します。
例：
ul li:before {
content: uri("bullet.gif");
}
CSS3 では、:not 擬似セレクタが導入されました。これを使用すると、簡単に特定のコンテンツを選択できます。最初の例では、href属性を持たないすべてのハイパーリンクを選択したい場合、次の構文を使用します：
a:not([href])
この構文は通常のハイパーリンクには影響を与えません。ただし、アンカー定義にはアクセスできます。
<a name="top">Seitenanfang</a>
より詳細な例を示し、:not の機能を説明します。文書内に複数のテキスト段落が定義されています。
<body> <h1>PSD-Tutorials.de</h1> <p>Das ist ein Absatz.</p> <p>Das ist ein weiterer Absatz.</p> <div>Das ist ein Textbereich.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
pでマークされたテキストの他に、div領域とハイパーリンクもあります。次に、次のことが起こります：
• pでマークされたすべての段落に黒の文字色が割り当てられます。
• p段落がない場所では、代わりに赤が文字色として使用されます。
それに対応するCSS構文は次のようになります：
p {
color:#000;
}
:not(p) {
color:#ff0000;
}継承の原則
CSSの定義を理解する際に重要な事柄の1つは、継承です。実際、CSSではスタイルプロパティが1つの要素から別の要素に受け継がれます。
例：
html {
color: red
}この定義により、html要素に赤の前景色が割り当てられます。
この継承原則により、htmlの色定義はhtmlの下にあるすべての要素に適用されます。つまり、htmlより下の要素は最初からすべて赤で表示されます。この手法の利点：これらの要素に赤を明示的に色として指定する必要はありません。ただし、p段落のコンテンツを赤に表示したくない場合はどうすればよいでしょうか？ その場合はhtmlの上位色定義を上書きする必要があります。
html {
color: red;
}
p {
color: #000;
}
今、pとdivの2つの要素がある場合はどうなりますか？
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
結果は次のようになります：
htmlの色定義はdivの内容にのみ影響します。一方、p段落は黒い文字で表示されます。
CSSにはスタイル定義をするさまざまな方法があります。そのため、元素に矛盾する指示があることがあります。このような場合、CSSは重み付けの原則を規定しています。この原則により、要素に優先される指示が規定されています。この原則について詳細に説明するつもりはありませんが、たとえばhttp://wiki.selfhtml.org/wiki/CSS/Kaskadeのページやhttp://www.thestyleworks.de/basics/cascade.shtmlなどで詳細な情報が見つかります。
私の意図は、CSSプロパティを定義する際に注意すべき点を示すことです。そのための例として、次のものが役立ちます：
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>ブラウザでの表示は次のとおりです：
例えば、strongで指定された単語は異なる形式で表示されます。適用されるフォーマットの種類は、定義の順序によって異なります。
他にも、!importantというキーワードがあり、特に重要なCSS指示を示すことができます。
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>同様に、結果を見てみましょう：
このチュートリアルで言及されているソースをぜひもう一度読んでください。（まずはこのトピックに深く入り込む必要はないかもしれませんが）。
