CSS疑似クラスの操作
（ホバー、訪問済み、無効など）などの特定の状態の要素を選択するCSS疑似クラスを使用して、HTMLの既存の要素に特定のスタイルを追加できます。
注 − CSS疑似クラスを疑似要素から分離するために、CSS3では、疑似クラスは単一コロン表記を使用します。
構文
以下は、要素でCSSPseudoクラスを使用するための構文です-
Selector:pseudo-class {
css-property: /*value*/;
} 以下は、利用可能なすべてのCSS疑似クラスです-
| Sr.No | 疑似クラスと説明 |
|---|---|
| 1 | アクティブ アクティブな言及された要素を選択します |
| 2 | チェック済み チェックされた言及された要素をすべて選択します |
| 3 | 無効 無効になっている言及された要素をすべて選択します |
| 4 | 空 子を持たない言及されたすべての要素を選択します |
| 5 | 有効 有効な言及されたすべての要素を選択します |
| 6 | 最初の子 親の最初の子である言及されたすべての要素を選択します |
| 7 | 最初のタイプ 親の最初に言及された要素であるすべての要素を選択します |
| 8 | フォーカス フォーカスがある言及された要素を選択します |
| 9 | ホバー マウスオーバーで言及された要素を選択します |
| 10 | 範囲内 指定された範囲内の値を持つ言及された要素を選択します |
| 11 | 無効 無効な値を持つ言及されたすべての要素を選択します |
| 12 | lang （言語） 「言語」で始まるlang属性値を持つ言及されたすべての要素を選択します |
| 13 | 最後の子 親の最後の子である言及されたすべての要素を選択します |
| 14 | 最後のタイプ 親の最後に言及された要素であるすべての要素を選択します |
| 15 | リンク 未訪問の言及された要素をすべて選択します |
| 16 | not（selector） 言及された要素ではないすべての要素を選択します |
| 17 | n番目の子（n） 親のn番目の子である言及されたすべての要素を選択します |
| 18 | nth-last-child（n） 最後の子から数えて、親のn番目の子である言及されたすべての要素を選択します |
| 19 | nth-last-oftype（n） 最後の子から数えて、親のn番目に言及された要素である言及されたすべての要素を選択します |
| 20 | nth-of-type（n） 親のn番目に言及された要素である言及されたすべての要素を選択します |
| 21 | タイプのみ 親の唯一の言及された要素である言及されたすべての要素を選択します |
| 22 | 一人っ子 親の唯一の子である言及されたすべての要素を選択します |
| 23 | オプション 「必須」属性のない言及された要素を選択します |
| 24 | 範囲外 指定された範囲外の値を持つ言及された要素を選択します |
| 25 | 読み取り専用 「読み取り専用」属性が指定された言及された要素を選択します |
| 26 | 読み取り/書き込み 「読み取り専用」属性のない言及された要素を選択します |
| 27 | 必須 「必須」属性が指定された言及された要素を選択します |
| 28 | ルート ドキュメントのルート要素を選択します |
| 29 | ターゲット 現在アクティブな言及された要素を選択します（そのアンカー名を含むURLをクリックします） |
| 30 | 有効 有効な値を持つ言及されたすべての要素を選択します |
| 31 | 訪問済み 訪問したすべての言及された要素を選択します |
例
CSS疑似クラスの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html> 出力
これにより、次の出力が生成されます-
例
CSS疑似クラスの別の例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html> 出力
これにより、次の出力が生成されます-
div要素にカーソルを合わせていない場合-
div要素にカーソルを合わせると-
-
CSSを使用したテキスト変換
CSS text-transformプロパティを使用すると、要素のテキストの大文字化を設定できます。次の値を受け入れることができます：大文字、小文字、大文字、全幅、フルサイズの仮名、なし。 構文 CSStext-transformプロパティの構文は次のとおりです- Selector { text-transform: /*value*/ } 例 次の例は、CSSテキスト変換プロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> h2 { te
-
CSSを使用したテーブルのスタイリング
CSSを使用してテーブルのスタイルを定義できます。次のプロパティは、とその要素のスタイルを設定するために使用されます- 境界線 CSS borderプロパティは、border-width、border-style、border-colorを定義するために使用されます。 境界の崩壊 このプロパティは、要素の境界線を共有するか個別にするかを指定するために使用されます。 キャプション caption-sideプロパティは、テーブルのキャプションボックスを垂直方向に配置するために使用されます。 空のセル このプロパティは、テーブルの空のセルの表示を指定するために使用されます。 テーブ