CSS クラス内の最初と最後の要素を異なるスタイルにするにはどうすればよいですか?

要素への CSS クラスの実装を理解する

HTML では、class 属性を使用して複数のクラスを 1 つの要素に適用できます。各クラスは異なるスタイルを定義できます。

要素に異なるスタイルを適用する

指定されたシナリオのタスクは、.social div 内の最初と最後の要素に特定のスタイルを適用することです。

1. 最初の要素 (トップなし) Padding):

   • 最初のクラスを使用して、.social 内の最初の要素をターゲットにします。
   • .social.first CSS ルールで padding-top プロパティを 0 として定義します。 .

2. 最後の要素 (底なし) Border):

   • 最後のクラスを使用して、.social 内の最後の要素をターゲットにします。
   • .social.last CSS ルールで border-bottom プロパティを none として定義します.

HTMLコード:

<div class="social first">
  ...
</div>

CSS コード:

.social {
  width: 330px;
  height: 75px;
  float: right;
  text-align: left;
  padding: 10px 0;
  border-bottom: dotted 1px #6d6d6d;
}

.social.first {
  padding-top: 0;
}

.social.last {
  border-bottom: none;
}

上記の CSS では、.social クラスがその中のすべての要素のデフォルト スタイルを定義します。 .social.first クラスと .social.last クラスは、それぞれ最初と最後の要素のこれらのスタイルをオーバーライドします。

このアプローチを利用すると、親要素内の特定の要素に異なるスタイルを適用でき、より多くのスタイルを適用できます。 Web ページのレイアウトと外観をきめ細かく制御できます。

以上がCSS クラス内の最初と最後の要素を異なるスタイルにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。