概要

CMSって痒いところに手が届かない時がありますよね。
CMSだけでなく自動的に部分的なHTMLを作成してくれることも最近ではよくあると思います。
そのようなときに思うような id や name が付けられないときに属性セレクタがつかえるとなんとかなることも！

サンプル

コード

システム側で生成する div に xxx-id というものが付加されている場合を想定。

<style>
  <!-- xxx-id がついているもの全て -->
  div[xxx-id] {text-decoration: underline;}

  <!-- xxx-id が x-100 のもの全て -->
  div[xxx-id="x-100"] {color: red;}

  <!-- xxx-id が x-10 で始まるもの全て -->
  div[xxx-id^="x-10"] {font-weight: bold;}

</style>
<div>
  <div>あああ</div>
  <div xxx-id="x-100">あああ</div>
  <div xxx-id="x-101">あああ</div>
  <div xxx-id="x-200">あああ</div>
</div>

リザルト

あああ

参考

属性セレクタ