ホームページ > 記事 > ウェブフロントエンド > CSSを使用して要素のすべての子要素(最後の要素を除く)を選択するにはどうすればよいですか?
CSSを使用して要素のすべての子要素(最後の要素を除く)を選択するにはどうすればよいですか?
- PHPz転載
- 2023-09-16 08:45:072135ブラウズ
CSS は、一般的に使用される Web ページのスタイルです。 Web アプリケーションを開発するとき、さまざまな要素にさまざまなスタイルを適用する必要がある場合があります。この共通の要件は、要素の最後の子要素を除くすべての子要素を選択することです。 CSS を適用して、要素のすべての子要素 (最後の子要素を除く) を選択します。
この記事では、さまざまな方法を使用して CSS の最後の子要素を除くすべての子要素を選択する方法を説明します。各メソッドとその構文について詳しく説明し、その仕組みを理解するのに役立つ例も示します。
最後の子要素を除くすべての子要素を選択する最初の方法では、:not() セレクターを使用します。これにより、特定のセレクターに一致しないすべての要素を選択できます。 2 番目の方法では、:nth-last-child() セレクターを使用します。これは、親要素の末尾から n 番目の子であるすべての要素を選択します。このメソッドでは、要素のすべての子要素 (HTML の最後の子要素を除く) を選択するのに役立つ n 2 パラメーターを指定します。
どちらの方法も Web アプリケーションを開発する場合に非常に便利で、Web ページに必要な UI の実装に役立つ可能性があります。上で説明したセレクターを使用すると、これらのセレクターがどのように機能するかを理解するのに役立ち、Web ページの機能と UI のカスタム スタイルを作成できます。
方法 1: :not セレクターを使用する
- not セレクターは、特定の条件に一致する要素を除くすべての要素を選択できる強力な CSS セレクターです。最後の要素を除くすべての子要素を選択するには、:not セレクターと :last-child セレクターを使用できます。
- not() セレクターを使用して要素のすべての子 (最後の子を除く) を選択するには、これを :last-child セレクターと一緒に使用します。 :last-child セレクターは、要素の最後の子要素を選択するのに役立ちます。このアプローチと 2 つのセレクターを組み合わせて使用すると、要素の最後の子要素を除くすべての子要素を選択できます。
以下は、:not() セレクターを使用して親要素のすべての子要素 (最後の子要素を除く) を選択する方法の構文です -
＃＃＃文法＃＃＃以下の構文では、.parent は親要素のセレクターであり、 > はその直接の子要素をすべて選択し、 * はすべての子要素を選択し、 :not(:last-child) は最後の子要素を選択から除外します。
リーリー ＃＃＃例＃＃＃この例では、CSS セレクター .parent > *:not(:last-child) は、最後の要素を除く、.parent クラス要素 (つまり、h1、h2、p、span 要素) のすべての直接の子を選択します。子要素、つまり
要素。 CSS を使用して、「color」プロパティを .parent 要素の最初の 3 つの子要素 (つまり、h1、h2、および p 要素) に適用しますが、4 番目の子要素 (つまり、要素) は影響を受けません。
次に、CSS コードを HTML ページのコードに適用する方法を見てみましょう -跨度> リーリー 跨度>方法 2::nth-last-child() セレクターを使用する
- nth-last-child() セレクターは、要素の子のリスト内の位置に基づいて要素を選択できる、CSS のもう 1 つの便利なツールです。これを使用して、:nth-last-child(n 2) を使用して最後の子を除くすべてを選択することができます。
:nth-last-child() セレクターを使用して、最後の子要素を除くすべての子要素を選択するには、n 2 パラメーターを指定できます。定義されたパラメータは CSS を使用して、最後の子要素である最後の子要素を除く HTML のすべての要素を選択します。 以下は、:nth-last-child() セレクターを使用して親要素のすべての子要素 (最後の子要素を除く) を選択する方法の構文です -
＃＃＃文法＃＃＃次の構文では、.parent は親要素のセレクターです。 > はその直接の子要素をすべて選択します。 * はすべての子要素を選択します。 :nth-last-child(n 2) は最後の 1 つを除くすべての子要素を選択します。子供たち。
リーリー ＃＃＃例＃＃＃この例では、CSS セレクター .parent > *:nth-last-child(n 2) は、最後の子要素を除く、.parent クラス要素のすべての直接の子要素を選択します。ここでは、.parent 要素内のすべてのボタン要素が選択されますが、最後のボタン要素は選択されません。
複数の CSS プロパティが最初の 3 つのボタンに適用されていますが、CSS スタイルは最後の子ボタンには追加されていません。
次に、CSS コードを HTML ページのコードに適用する方法を見てみましょう -
<!DOCTYPE html>
<html >
<head>
<style>
.parent > *:nth-last-child(n+2) {
background-color: green;
padding: 10px;
color: white;
border-radius: 10px;
width: 10em;
text-decoration: none;
font-family: sans-serif;
border: none;
}
</style>
</head>
<body>
<div class="parent">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。
以上がCSSを使用して要素のすべての子要素(最後の要素を除く)を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。