Compass(Sass)で特定種類の要素を一括スタイル指定する

goto_jp 341views 更新:2014年4月2日

Compassの「elements-of-type」関数を利用することで、ブロック要素、インライン要素といった特定種類のHTMLタグを一括してスタイル指定することができます。

Sass記述

#{elements-of-type(block)} {
  background: #ccc;
}

上記例の場合、HTMLの「block」要素すべてを指定する記述になります。

出力CSS

address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul {
  background: #cccccc;
}

このようにブロック要素がすべて定義されます。

指定できる要素はCSSプロパティの「display」と同じ値が指定できますが、詳しくは公式リファレンスを参照してください。
http://compass-style.org/reference/compass/helpers/display/

ほかにも下記のようにhtml5からのタグを一括して指定することもできます。

#{elements-of-type(html5)} {
  display: block;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません