IE8で :last-child 疑似クラスを使う方法

企業系のWebサイト制作案件でよくある、「検証対象ブラウザはWindows 7+IE8以降です」というケース。

Windows 7でのIEの最低バージョンが8なため、2015年1月現在でも、社内システムやセキュリティ等の絡みでIE8を使用している企業は結構多いようです。

このようなケースで :last-child 疑似クラスを使う必要がある場合、以下の2つの方法があります。

1. Selectivizr を使う

このSelectivizrの特長は、非常に導入が簡単、という事につきます。
基本的にはhtmlに読み込ませるだけで使えるようになります。
加えてこのSelectivizr、CSS3の主なセレクタや疑似クラス・要素(全てではありません)が使えるようになります。

導入方法は、

  1. サイトからSelectivizrをダウンロード
  2. htmlのheadにリンクを設定(IE6〜8の条件付きコメントでの設置推奨です)

ざっくりとですが、以上2ステップで導入が完了します。
簡単ですね。

ただし、ひとつ条件がありまして、jQueryやprototypeなどのライブラリが必須になっています。
とはいえ現状では、ライブラリを使用していないサイトはあまりないので、特に気にする必要はないと思います。

記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script type="text/javascript" src="./jquery.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="./selectivizr-min.js"></script>
<![endif]-->
</head>

Selectivizrのダウンロード

Selectivizr

2. jQuery で記述する

上記のSelectivizrを設置する場合、Webサイト内のすべてのhtmlに記述をする必要があるため、すでに大量のページがあるようなサイトでの導入はやや面倒かもしれません。
また、:last-child を使用するという事は、多くの場合[li:last-child]とするのではないでしょうか。
このような状況の時は、以下のようにちょこっとだけjQueryを記述する方法が簡単かもしれません。

記述例(html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./sample.js"></script>
</head>

記述例(sample.js)

$(function(){
  $('li:last-child').addClass('last');
});

特定の場所にだけ :last-child を使用したい時は、sample.jsの[li:last-child]部分をCSSのネストと同じようにしてあげれば良いです。
[.hoge li:last-child]こんな感じに。

余談

下記の参考サイトによると、今からおよそ1年後の2016年1月12日には、IE8のサポートが終了するとの事なので、本記事の内容はそれまでの暫定的な対応方法にはなりますが、IE8のサポートが終了したら、JavaScriptの記述を削除するだけ(2)で良いので、比較的良い方法なのでは、と思います。

参考サイト
[ITmedia ニュース]Microsoft、IE 8のサポートを2016年1月12日に終了へ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする