CSS WEB制作

CSS★最後の要素だけスタイルを適用させない

投稿日:

最後の要素だけスタイルを適用させたくないときには、疑似要素を使って指定するのが定番。
CSSにもいろんな書き方があるけど、便利な方法を見つけたのでメモしておく。

兄弟要素の最後の要素だけスタイルを適用しないようにする。
たとえば、最後だけラインをつけないとか、マージンやパディングを変えたいときなど、結構よく使うテクニックです。

/* 最後の要素だけスタイルを適用させない */

セレクタ:not( :last-of-type ) {

}
例)疑似要素なし
  要素全部にスタイルを適用
  •  りんご
  •  バナナ
  •  もも
  •  いちご
  •  みかん
例)疑似要素あり
  最後の要素だけスタイルを適用させない
  •  りんご
  •  バナナ
  •  もも
  •  いちご
  •  みかん

上記のCSSの疑似クラスは2つとも全てのブラウザ(IE含む)でサポートされています。

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS, WEB制作

執筆者:

関連記事

CSS★画像を右寄せにする

画像を右寄せにする方法 デフォルトは左寄せになっています。   右寄せにする手順 (1)画像をブロック要素として囲む。    ブロック要素= div・p・ul・li・dl など ブロック要素 …

HTML共通部分を部品化して読み込ませる方法

今回はHTMLでサイトを作って欲しいとの要望。 ナビやヘッダー、フッター部分は全ページ共通なので、修正や後々のメンテナンスも考えて、それらを部品化して1箇所で管理したい。 HTMLには、他のページを読 …

no image

CSS 重なり順序を指定する

背景画像を複数重ねるなら CSS3 より、要素に複数の背景を適用できるようになりました。 複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、指定した順に重ねて …

Atom★余分な改行を削除するには?

コードを打つのに便利なテキストエディタ「ATOM」。 サイト制作には欠かせないです。 このテキストエディタは、本体をインストールした後、自分の好きな機能を「パッケージ」というカタチで後からどんどん追加 …

フロート解除★clearfixの使い方

フロート解除の指定方法 <CSS> .clearfix:after { content:” “; display:block; clear:both; }   <HTML> <div …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。