*

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

おすすめトピックス

関連記事

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

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

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

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

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

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

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

著者について

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

フォローはこちら

       

       
JA士幌町のスイートコーンとミルクの味わい「北海道のこだわりプリン」

士幌町の北海道のこだわりプリンをいただいて、とても美味しかった

Photoshopで写真の黄ばみや赤みを補正し抑える方法

デジカメで撮った写真が思ったより黄色かったという経験はありませ

簡単にPCのデスクトップキャプチャーができるソフト「FonePaw PC画面録画」のレビュー

パソコンの画面を録画するにはどうすればいいの? ウ

ホンダ純正Gathersドライブレコーダーでブザーが止まらない時の対処方法

近年煽り運転のニュースが世間を賑わせている中、ドライブレコーダ

Youtubeの動画でアンケートに回答するにはどうやるの?

いわゆる動画サイトには視聴者の方に意見を問うアンケート機能とい

→もっと見る