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

CSS：First-of-Type Pseudo-Classとは何ですか？

CSSを作成するときに、特定の要素をターゲットにしたい場合があります。 <div>でいっぱいのHTMLドキュメントがあるとしましょう タグと<span> タグですが、何らかの方法でスタイルを設定するために、各タイプの最初のタイプのみをターゲットにしたかったのです。これは、：first-of-type疑似クラスと呼ばれるもので実行できます。

疑似クラスは、CSSセレクターが指定された元のスタイルとは異なる特定のスタイルを持つための方法です。これは、要素の状態によって異なります。この例では、最初の<div>を選択します。 そして最初の<span> スタイリングできるので、他のスパンやdivは選択されません。

開始するための例を次に示します。 

<html>
 
 <head>
   <style>
     body {
       display: flex;
       flex-flow: row wrap;
     }
     div {
       height: 100px;
       width: 200px;
       border: 1px solid black;
       margin: 20px;
       padding: 20px;
     }
 
     /* First of type */
     div:first-of-type {
       background: purple;
       color: white;
     }
     div span:first-of-type {
       color: red;
       text-decoration: underline;
       background: lightblue;
     }
 
   </style>
 </head>
 <body>
 
   <div>I am the first div<span> I am inside the div and the first span</span><span> I am the second span</span></div>
   <div>I am the second the div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the third div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the fourth div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the fifth div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the sixth div<span> I am inside the div</span><span> I am the second span</span></div>
   <div>I am the seventh div<span> I am inside the div</span><span> I am the second span</span></div>
 </body>
</html>

ここに、それらのdiv内に一連のdivとスパンがあります。 CSSセレクターdiv:first-of-type そのタイプの最初の要素のみを選択し、スタイルを設定します。 div span:first-of-type divは親要素であるため、各divの最初のスパンを選択します。

div:first-of-type div:nth-child(1)と言うのと同じです

結論

この記事では、：first-of-type疑似クラスについて説明しました。疑似クラスは基本的に、スタイルを設定するときに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のborder-styleプロパティ

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