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

疑似クラスとCSSクラス

CSS疑似クラスは、要素自体ではなくCSSクラスと組み合わせて、Html要素へのより選択的なアプローチを提供できます。

例

CSS疑似クラスとCSSクラスを組み合わせる例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px;
   padding: 10px;
   text-align: center;
   border: 1px solid black;
}
.Italy:lang(it)::after {
   padding: 20px;
   content: '~ Italy';
   font-style: italic;
}
.Spain:lang(es)::after {
   padding: 8px;
   content: '~ Spain';
   font-style: italic;
}
.Germany:lang(nl)::after {
   padding: 20px;
   content: '~ Belgium';
   font-style: italic;
}
.Spain:lang(es){
   background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
   background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
   background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div class="Italy" lang='it'>Rome</div>
<div class="Germany" lang='nl'>Brussels</div>
<div class="Spain" lang='es'>Madrid</div>
</body>
</html>

出力

以下は出力です-

疑似クラスとCSSクラス

例

CSS疑似クラスとCSSクラスを組み合わせる別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-child(1){
   background-color: #FF8A00;
}
.child:nth-child(2){
   background-color: #F44336;
}
.child:nth-child(3){
   background-color: #C303C3;
}
.child:nth-child(4){
   background-color: #4CAF50;
}
.child:nth-child(5){
   background-color: #03A9F4;
}
.child:nth-child(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Classes and CSS 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>

出力

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

疑似クラスとCSSクラス


  1. 疑似クラスとすべてのCSSクラス

    疑似クラスキーワードは、それが追加されるセレクターの特別な状態を指定するために使用されます。これにより、より詳細な制御が可能になり、ホバー、チェック、訪問などの特定の状態にあるセレクターをターゲットにできるようになりました。 以下は、CSSの疑似クラスを示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } a { &

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

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