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

CSSの：lang疑似クラス

CSS：lang（）疑似クラスセレクターは、lang属性が指定された要素を選択するために使用されます。これにより、コンテンツに関連付けられている特定の言語をターゲットにして、それに応じてスタイルを設定できます。

構文

以下は構文です-

:lang(){
   /*declarations*/
}

CSS：lang（）疑似クラスセレクターの例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it)::after {
   padding: 20px;
   content: '~ Italian';
   font-style: italic;
}
p:lang(es)::after {
   padding: 8px;
   content: '~ Spanish';
   font-style: italic;
}
p:lang(en)::after {
   padding: 20px;
   content: '~ English';
   font-style: italic;
}
</style>
</head>
<body>
<p lang='it'>Bella ciao</p>
<p lang='en'>Nice hello</p>
<p lang='es'>Bueno adios</p>
</body>
</html>

出力

CSSの：lang疑似クラス

CSSの別の例を見てみましょう：lang（）疑似クラスセレクター-

例

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

出力

CSSの：lang疑似クラス


  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のborder-colorプロパティ

    CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。 構文 CSSborder-colorプロパティの構文は次のとおりです- Selector {    border-color: /*value*/ } 次の例は、CSSのborder-colorプロパティ-を示しています。 例 <!DOCTYPE html>