Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

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

$
0
0

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

HTML

link要素が2つあります。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

参考


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>