*

CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

公開日: : ノウハウ

css3-2

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。

例えば ul li タグのリストの場合、従来の CSS2 では li にスタイルを適用すればクラスや ID を個別に指定しない限り全ての li にスタイルが適用されます。しかし、CSS3 ではクラスや ID を指定せず1番目の li、最後の li、偶数・奇数番目の li、というように細かなスタイルの指定ができるようになりました。

最初、最後、偶数、奇数番目の要素にスタイルを適用する方法というのは基本なのでよく見かけますが、要素の2番目以降とか2番目以外にスタイルを適用する方法に意外に手間取ったのでメモしておきます。

要素の2番目以降にスタイルを適用

上の画像を例に2番目以降の li 要素にスタイルを適用する方法を紹介します。

2番目以降とは言い換えれば1番目以外という事です。次のように CSS を記述します。

li:not(:first-child){

}

最初の要素を指定する為には「:first-child」の擬似クラスを使用します。更に否定の意味である「:not」でくくります。これで最初の要素以外にスタイルを適用する構文ができました。not はプログラミング言語や電子回路の分野でもよく目にしますが、CSS でも否定擬似クラスという名前で存在するんですね。

対応ブラウザは?

:first-child と :not の両方に対応しているブラウザは…。

  • Internet Explorer9 以上
  • Firefox
  • Google Chrome
  • Safari3 以上
  • Opera10 以上

そこそこ古い IE9 でも使えるのでまぁまぁ使えます。最新ブラウザなら難なくカバーしています。

その他の用法

:not (否定擬似クラス)は使い方次第で様々な指定方法が可能です。

  • :not(span) とすれば span タグ以外にスタイルが適用されます。
  • :not(:nth-child(2))とすれば2番目の要素以外にスタイルが適用されます。
  • :not(:hover) とすれば、マウスが乗っていない要素にスタイルが適用されます。
  • :not(href*=["webmist.info"])とすればリンク先が指定のドメイン以外の a タグにスタイルが適用されます。

最後のものは、外部リンクの a タグにスタイルを適用するという場合に便利かもしれません。ちなみに*=(アスタリスクイコール)は指定の文字列を含むという意味でドメインだけ指定すれば同じドメイン内のどんなページをリンク先に指定していようがスタイルが適用されます。

使い方は各々の応用力が試されますね。

上部広告

  • Pocket

おすすめトピックス

関連記事

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

html5 audio
ChromeではHTML5のaudioタグは1ページに6つまでしか使えないみたいだよ

HTML5 から新しく追加された要素の audio タグはプラグイン不要でブラウザ上で音声を再生する事ができます。従来ではウェブサイトで音声を再生させようとする場合、Quicktime や Windows Media P […]

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
安全靴
カジュアルで疲れにくく痛くない!安くて履きやすいおすすめ安全靴【喜多】

倉庫や工場、建設業の方ならお馴染みの物かと思いますが、安全靴と

CapsLockキー
CapsLockキーにイライラ、いらないので無効化してさしあげた

キーボードの CapsLock キーって知ってますか?あなたの

AMP
WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応

Photoshopで写真の一部の色を変える色の置き換え機能の使い方

この写真のこの部分だけ色を変えたい!この商品画像の色を変えたい

どんまる
海鮮丼が500円!?滋賀県米原市の驚く安さの「近江丼丸」持ち帰りもOK【国道365号線沿い】

2017年1月11日、滋賀県米原市にオープンした海鮮丼が500

→もっと見る