cssはクラス属性、id属性、タグに対してスタイルを指定する事が多いですが、その他の属性に対してもスタイルを指定する事が出来ます。

属性セレクタの例

カスタムデータ属性に対してスタイルを指定する事も可能です。

HTML

<div data-sample="false">サンプル1</div>

CSS

[data-sample] {
  width: 50px;
  height:50px;
  background-color: aqua;
}

結果

サンプル1

基本

属性セレクタにスタイルを指定する基本的な方法は下記の通りです。

[属性名] {
  スタイル
}

パターン

属性名

例で示した通りなので割愛します。

属性名=”値”

HTML

<div data-sample="true">サンプル2</div>

CSS

[data-sample="true"] {
  width: 70px;
  height:70px;
  background-color: red;
}

結果

サンプル2

属性名~=”値”

チルダ(~)を使用すると、その属性が特定の値を含んでいる要素にスタイルが適用されます。

HTML

<div data-sample="a">サンプル1</div>
<div data-sample="b">サンプル2</div>
<div data-sample="a c">サンプル3</div>

CSS

[data-sample] {
  width: 50px;
  height:50px;
  background-color: aqua;
}

[data-sample~="a"] {
  width: 70px;
  height:70px;
  background-color: red;
}

結果

data-sample属性に “a” が指定されているものが赤くなっています。

サンプル1

サンプル2

サンプル3

属性名*=”値”

その属性が特定の値の文字列を含んでいる要素にスタイルが適用されます。

HTML

<div data-sample="test01">サンプル1</div>
<div data-sample="01test">サンプル2</div>
<div data-sample="main">サンプル3</div>

CSS

[data-sample] {
  width: 50px;
  height:50px;
  background-color: aqua;
}

[data-sample*="test"] {
  width: 70px;
  height:70px;
  background-color: red;
}

結果

サンプル1

サンプル2

サンプル3

注意点

当然ですが、「属性名=”値”」よりも「属性名」でスタイルを指定すると、後に指定した方にスタイルが上書きされます。

HTML

<div data-sample="false">サンプル1</div>
<div data-sample="true">サンプル2</div>

CSS

[data-sample="true"] {
  width: 70px;
  height:70px;
  background-color: red;
}

[data-sample] {
  width: 50px;
  height:50px;
  background-color: aqua;
}

結果

サンプル1

サンプル2

最後に

特にありません。