属性セレクタは直感的でよく使うのですが、否定の構文がないので困っていました。調べると否定擬似クラスがあることが分かりました。属性セレクタと組み合わせて使う方法が難しかったのでメモしておきます。
HTML
link要素が２つあります。media属性が存在しないlinkだけ取得する方法の紹介です。
<head><linkhref="a.css"rel="stylesheet"media="only screen and (max-width: 320px)"><linkhref="b.css"rel="stylesheet"></head>DevTools コンソール
Chromeの開発ツールのコンソールで指定する例
$('head > link[rel="stylesheet"][href]:not([media])').attr('href')結果
"b.css"puppeteer
puppeteerで指定する例。セレクタの指定内容はDevToolsと同じです。
consthref=awaitpage.$eval('head > link[rel="stylesheet"][href]:not([media])',el=>el.href);console.log(href);結果
b.css参考
- CSSで特定の順番や種類の要素を指定してスタイルを調整する https://tech.qookie.jp/posts/css-nth-child-style/
- 属性セレクタ https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
- 否定擬似クラス https://developer.mozilla.org/ja/docs/Web/CSS/:not
- DevTools コンソール https://developers.google.com/web/tools/chrome-devtools/console?hl=ja
- $eval() https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-frameevalselector-pagefunction-args-1