CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの疑似クラスとは何ですか

CSS疑似クラスは、さまざまな要素の特殊な状態を表します。これらのクラスは、ドキュメント内の基本要素だけでなく、ステータス、位置、履歴などの外部要因も表します。これらの疑似クラスを使用すると、開発者は、を介して直接選択できない要素のスタイルを設定することもできます。 CSSセレクター。

構文

以下は、要素でCSSPseudoクラスを使用する構文です-

Selector:pseudo-class {
   css-property: /*value*/;
}

例

CSS疑似クラスを使用する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input:valid {
   color: #fefefe;
   background-color: #4CAF50;
}
input:invalid {
   color: #fefefe;
   background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<label for="EmailSelect">Email :
<input type="email" id="EmailSelect" size="25" required>
</label><br>
<label for="PassSelect">Password :
<input type="password" id="PassSelect" minlength="8" required>
</label>
<div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div>
</fieldset>
</form>
</body>
</html>

出力

これにより、次の出力が生成されます-

フォームフィールドに無効なデータがある場合-

CSSの疑似クラスとは何ですか

フォームフィールドに有効なデータがある場合-

CSSの疑似クラスとは何ですか

例

CSS疑似クラスの別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
a {
   text-decoration: none;
   background:grey;
   color: white;
   border-radius: 3px;
   padding: 6px;
}
input[type="button"] {
   border-radius: 10px;
}
:target {
   border:4px solid black;
   margin: 0 auto;
   height: 200px;
   width: 200px;
   background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg');
}
#circle {
   border-radius: 50%;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<div>
<div id="circle"></div>
<div id="square"></div>
</div>
<div>
<a href="#square">Tile</a>
<a href="#circle">Avatar</a>
</div>
</fieldset>
</form>
</body>
</html>

出力

これにより、次の出力が生成されます-

ボタンをクリックする前に-

CSSの疑似クラスとは何ですか

[タイル]をクリックした後 ボタン-

CSSの疑似クラスとは何ですか

「アバター」をクリックした後 ボタン-

CSSの疑似クラスとは何ですか


  1. CSSの：n番目の子の疑似クラス

    CSS：nth-​​child（）疑似クラスは、他の要素のn番目の子要素である要素を選択します。 構文 以下は構文です- :nth-child(){    /*declarations*/ } 例 CSSの例を見てみましょう：nth-​​child（）疑似クラス- <!DOCTYPE html> <html> <head> <title>CSS :nth-child() Pseudo Class</title> <style> form {    width:70%;  

  2. CSSの疑似クラスと疑似要素の違い

    疑似クラス 疑似クラスは、：hover、：active、：last-childなどのセレクターの状態を表します。これらは単一のコロン（:)で始まります。 CSS疑似クラスの構文は次のとおりです- :pseudo-class{ attribute: /*value*/ } 疑似要素 同様に、疑似要素は、::after、::before、::first-lineなどの仮想要素を選択するために使用されます。 これらは二重コロン（::）で始まります。 CSS疑似要素の構文は次のとおりです- ::pseudo-element{ attribute: /*value*/ } 例 次