SASS の最後の子および最後のタイプセレクター

SASS は、シンプルで保守しやすいコードを作成するためのプレーン CSS を超えるさまざまな機能を提供しており、高度なセレクターもその 1 つです。 SASS には最後の子と最後のタイプ セレクターが含まれており、これについてはこのチュートリアルで説明します。

SASS の最後の子セレクター

「last-child」セレクターを使用すると、開発者は親要素内の最後の要素を選択できます。さらに、タイプに関係なく最後の HTML 要素を選択することもできます。最後の要素にネストされた子要素が含まれる場合、ネストされた要素は最後の子要素の一部であるため、その要素にもスタイルが適用されます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って CSS で「last-child」セレクターを使用できます。

リーリー

上記の構文は、「element」クラス名を含む HTML 要素の最後の子要素を選択します。

＃＃＃例＃＃＃

index.html ファイルで、「container」div 要素を作成し、2 つの段落と最後の子要素として div 要素を追加しました。

SCSS ファイルでは、「last-child」セレクターを使用して、コンテナー div 要素の最後の要素を選択します。出力では、スタイルが子 div 要素に適用されていることがわかります。

ファイル名 –index.html

リーリー

ファイル名 – style.scss

リーリー

コンパイル後、次のコードが生成されます。

ファイル名 – style.css

リーリー ＃＃＃例＃＃＃ リーリー ＃＃＃例＃＃＃

以下の例では、親 div 要素内に複数の子 div 要素を追加しています。さらに、最後の div 要素内に複数レベルのネストされた子要素を追加しました。 SCSS ファイルでは、last-child セレクターを使用して、親 div 要素の最後の要素を選択します。出力では、スタイルが最後の子要素のネストされた子要素にも適用されていることがわかります。

ファイル名 –index.html

リーリー

ファイル名 – style.scss

リーリー

コンパイル後、次のコードが生成されます。

ファイル名 – style.css

リーリー ＃＃＃例＃＃＃ リーリー SASS の最後の型セレクター

「last-of-type」セレクターを使用すると、開発者は親 div 要素内の特定のタイプの最後の要素を選択できます。したがって、「last-of-type」セレクターを使用する場合は、セレクターを使用して要素の型を指定する必要があります。クラス名、タグ名、要素名、IDなどを使用して要素の種類を指定できます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、SASS の「最後のタイプ」CSS セレクターを使用できます。 リーリー 上記の構文は、親要素の最後の「p」要素を選択します。

＃＃＃例＃＃＃

以下の例では、「multiple」に等しいクラス名を持つ div 要素を作成します。その後、2 つの段落要素と最後の div 要素を挿入しました。

SASS では、「last-of-type」セレクターを使用して、「multiple」要素内の最後の「p」要素を選択します。ユーザーは、最後の子要素ではないにもかかわらず、最後の "p" 要素にスタイルが適用されていることが出力で確認できます。

ファイル名 –index.html

リーリー

ファイル名 – style.scss

リーリー

コンパイル後、次のコードが生成されます。

ファイル名 – style.css

リーリー ＃＃＃例＃＃＃ リーリー ＃＃＃例＃＃＃

以下の例では、「fruit」クラスを含む複数の div 要素を作成します。さらに、「bike」クラス名を含む最後の div 要素を作成します。 SASS コードでは、「.fruit :last-of-type」セレクターを使用して、「fruit」クラス名を含む最後の要素を選択します。出力では、最後から 2 番目の div 要素 (「fruit」クラス名を含む最後の要素) がスタイル設定されていることがわかります。

ファイル名 –index.html

リーリー

ファイル名 – style.scss

リーリー コンパイル後、次のコードが生成されます。

ファイル名 – style.css

リーリー ＃＃＃例＃＃＃ リーリー

ユーザーは、SASS の「last-child」セレクターと「last-of-type」セレクターの使用方法を学習しました。 「last-child」セレクターは、任意の条件下で親要素内の最後の要素を選択するために使用されます。 「last-of-type」要素は、親要素内の特定のタイプの最後の子要素を選択するために使用されます。

以上がSASS の最後の子および最後のタイプセレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。