CSS3で採用された否定擬似クラス :not() を使ってみました。

jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshowを書きましたが、その後暫くするとスライドショーが表示されなくなりました。

調べてみると、番号付きリストをCSSとcounter()関数でデザインするという記事で紹介した、リストに独自のスタイルを追加したことが原因でした。

そこで、スライドショーを表示するために使われているcb-slideshowというクラスのリストのみ、独自のスタイル適用しないように、CSS3から採用された否定擬似クラス :not() を使ってみました。

具体には次の通りです。

.entry-content ul:not(.cb-slideshow) {
  list-style-type: none;
  margin-bottom: 1.5em;
　clear: both;
}
.entry-content ul:not(.cb-slideshow) li {
  position: relative;
  list-style-type: none;
  margin-bottom: 0.5em;
}
.entry-content ul:not(.cb-slideshow) li:before {
  display: block;
  content: '\2022';
  color: #94cc3d;
  position: absolute;
  top: 0;
  left: -1em;
  width: 0.4em;
  height: 0.4em;
}

特定のクラスを除外するだけではなく、特定の要素（次の例ではp要素）を除外することもできます。

:not(p) {
  /* ここにスタイルを記述 */
}

これで、複雑なコードを書かなくて済みます。