HOME技術ウェブCSS3で複数条件のセレクターを指定する

CSS3で複数条件のセレクターを指定する

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。

「~かつ、~」というセレクター

冒頭で示した、「テーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示する」というのは図で示すと以下のようになります。

CSS3で指定する場合には、以下のようになります。

table td:not(:first-child):not(:last-child){
border-right:5px solid #000;
}

「td:not(:first-child)」とは、「最初のtd要素ではない」という意味です。
「td:not(:last-child)」とは、「最後のtd要素ではない」という意味です。
これらを併記するには、「td:not(:first-child):not(:last-child)」と書きます。
これは「最初のtd要素ではなく、かつ、最後のtd要素でもない」という意味になります。

関連記事

FileZillaで文字化けして操作できないファイルを操作する

FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む

Googleカレンダーに別のアカウントのカレンダーを複数同期する

Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む

Windows10にアップグレードしたらApacheが起動しなくなった

Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む

ウェブフォントを埋め込み任意のフォントを表示させる

ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む

CSSで内容が少ない場合でもフッターを画面最下部に表示するその2

CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む

CSSで徐々に変化させるアニメーション効果をつける

CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。 CSS3で実現 例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きま…続きを読む

Zoomの有料契約を解約する

Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む

CSSで画面レイアウトをスマホ用とPC用とで分ける

CSSを使ってウェブサイトの画面レイアウトを、スマホ用とPC用とで切り替える方法です。 画面の幅によって表示方法を切り替える スマホを認識するというよりは、画面の横幅が何ピクセル以下か、によって読み込…続きを読む

CSSで二段組のリストをつくる

ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む

Fireworks:現在のFireworksユーザー権限では、レジストリ情報を更新することができません。と表示されて起動しない

Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny