CSS-疑似クラス

CSS擬似クラスは、一部のセレクターに特殊効果を追加するために使用されます。これらの効果を使用するためにJavaScriptやその他のスクリプトを使用する必要はありません。擬似クラスの簡単な構文は次のとおりです-

selector:pseudo-class {property: value}

CSSクラスは、擬似クラスで使用することもできます-

selector.class:pseudo-class {property: value}

最も一般的に使用される擬似クラスは次のとおりです-

Sr.No.	Value & Description
1	:link このクラスを使用して、未訪問のリンクに特別なスタイルを追加します。
2	:visited このクラスを使用して、訪問したリンクに特別なスタイルを追加します。
3	:hover このクラスを使用して、要素の上にマウスを置いたときに要素に特別なスタイルを追加します。
4	:active このクラスを使用して、アクティブな要素に特別なスタイルを追加します。
5	:focus このクラスを使用して、要素にフォーカスがある間に要素に特別なスタイルを追加します。
6	:first-child このクラスを使用して、他の要素の最初の子である要素に特別なスタイルを追加します。
7	:lang このクラスを使用して、指定された要素で使用する言語を指定します。

a：hoverは、CSS定義でa：linkとa：visitedの後に来なければ効果がありません。
有効にするためには、CSS定義のa：hoverの後にa：activeを指定する必要があります。
擬似クラス名は大文字と小文字が区別されません。
疑似クラスはCSSクラスとは異なりますが、組み合わせることができます。

：link擬似クラス

次の例は、_：link_クラスを使用してリンクの色を設定する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

それは次の黒いリンクを生成します-

：visited擬似クラス

以下は、_：visited_クラスを使用して訪問済みリンクの色を設定する方法を示す例です。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

これにより、次のリンクが生成されます。このリンクをクリックすると、色が緑に変わります。

：hover擬似クラス

次の例は、_：hover_クラスを使用して、リンク上にマウスポインターを移動したときにリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

次のリンクが生成されます。このリンクにマウスを合わせると、色が黄色に変わることがわかります。

：active疑似クラス

次の例は、_：active_クラスを使用してアクティブなリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

次のリンクが生成されます。ユーザーがクリックすると、色がピンクに変わります。

：focus疑似クラス

次の例は、_：focus_クラスを使用して、フォーカスされたリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

次のリンクが生成されます。このリンクがフォーカスされると、色がオレンジに変わります。フォーカスを失うと、色が元に戻ります。

：first-child擬似クラス

_：first-child_擬似クラスは、別の要素の最初の子である指定された要素と一致し、他の要素の最初の子であるその要素に特別なスタイルを追加します。

IEで：first-childを動作させるには、ドキュメントの先頭で<！DOCTYPE>を宣言する必要があります。

たとえば、すべての<div>要素の最初の段落をインデントするには、この定義を使用できます-

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>

      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>

      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>

   </body>
</html>

それは次の結果を生成します-

：lang擬似クラス

言語擬似クラス_：lang_を使用すると、特定のタグの言語設定に基づいてセレクターを構築できます。

このクラスは、特定の言語構成に対して異なる規則を持つ複数の言語にアピールする必要があるドキュメントで役立ちます。たとえば、フランス語では通常、引用符に山括弧（<および>）を使用しますが、英語では引用符（ 'および'）を使用します。

この違いに対処する必要があるドキュメントでは、：lang疑似クラスを使用して、引用符を適切に変更できます。次のコードは、使用されている言語に合わせて<blockquote>タグを適切に変更します-

<html>
   <head>
      <style type = "text/css">

        /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>

   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

：langセレクターは、ドキュメント内のすべての要素に適用されます。ただし、すべての要素がquotesプロパティを使用するわけではないため、ほとんどの要素では効果が透過的です。