CSS 要素名[属性名]で指定の属性がある要素にCSSを適用する

環境
Google Chrome 109.0.5414.120
Windows 10 Home 64bit

構文
要素名[属性名]
指定の属性がある要素にCSSを適用します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<style>
p[id] {
color:red;
}
[type]{
color:blue;
}
</style>
</head>
<body>
<p class="pA">東京</p>
<p id="pB">大阪</p>
<p><input type="text" id="del" value="削除" /></p>
<p><input id="update" value="更新" /></p>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> p[id] { color:red; } [type]{ color:blue; } </style> </head> <body> <p class="pA">東京</p> <p id="pB">大阪</p> <p><input type="text" id="del" value="削除" /></p> <p><input id="update" value="更新" /></p> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>
p[id] {
 color:red;
}
[type]{
 color:blue;
}
</style>
</head>
<body>
      <p class="pA">東京</p>
      <p id="pB">大阪</p>
      <p><input type="text" id="del" value="削除" /></p>
      <p><input id="update" value="更新" /></p>
</body>
</html>

結果
pが要素でidが属性です。要素「大阪」の文字色が赤になります。
typeの要素「削除」の文字色がgaryになります。

CSS

Posted by arkgame