*

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

公開日: : 最終更新日:2017/10/20 ノウハウ

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

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

関連記事

div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない
CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して
  • Pocket

おすすめトピックス

関連記事

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

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

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

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

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

著者について

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

フォローはこちら

       

       
Photoshopでアルファベットが大文字しか打てない時に確認する事

Photohsop で作業中ある異変に気が付きました。それはア

松本市のクレープ専門店「クレープ工房」モチモチ食感がくせになる

長野県松本市にクレープ専門店の「クレープ工房」があります。クレ

中野市のうどん専門店「田りた麺之助」で美味しさに衝撃を受けた

長野県に行ったら食べたいものと想像するのはやはり信州そばではな

志賀高原の池めぐりコースをトレッキングする時の駐車場や帰りのバスについて

大自然の山々や湿原を散策するのが好きで長野県の志賀高原へ行って

諏訪市の無添加手作りカレー専門店「黄金マッハカレー」

長野県諏訪市にある黄金マッハカレーはカレー専門店です。ただのカ

→もっと見る