More than 3 years have passed since last update.

CSSの属性セレクタと否定擬似クラスを同時に使用するサンプル

Last updated at 2020-09-02Posted at 2020-09-02

属性セレクタは直感的でよく使うのですが、否定の構文がないので困っていました。調べると否定擬似クラスがあることが分かりました。属性セレクタと組み合わせて使う方法が難しかったのでメモしておきます。

link要素が２つあります。media属性が存在しないlinkだけ取得する方法の紹介です。

<head>
  <link href="a.css" rel="stylesheet" media="only screen and (max-width: 320px)" >
  <link href="b.css" rel="stylesheet">
</head>

Chromeの開発ツールのコンソールで指定する例


$('head > link[rel="stylesheet"][href]:not([media])').attr('href')


"b.css"

puppeteerで指定する例。セレクタの指定内容はDevToolsと同じです。

const href = await page.$eval('head > link[rel="stylesheet"][href]:not([media])', el => el.href);
console.log(href);

b.css

参考