getCascadedCSSSelectors 関数とは

getCascadedCSSSelectors 関数とは、HTML5 の4-1. the default views 定義されているインタフェースで、要素にあたっているCSSセレクタを配列で取得するための関数です。
windowオブジェクト（グローバルオブジェクト）が持っている関数なので普通に、以下のように呼び出すことができます。

var element =document.getElementById('main-content');var selectors = getCascadedCSSSelectors(element);alert(selectors[0]);// #main-contentalert(selectors[1]);// div.sectionalert(selectors[2]);// divalert(selectors[3]);// *

たとえば、この例の場合は 4 つの計四つのCSSセレクタがあたっていることが分かります。

カスケード順とは何か

複数のCSS のルールが要素にあたっている場合に、優先される順のことをカスケード順と言います。

!important 宣言の扱い

一つのセレクタが示すルール内に !important 宣言を含むプロパティと !important 宣言を含まないプロパティが存在する場合、 getCascadedCSSSelectors の結果に同じセレクタが二つ含まれることになります。
たとえば、以下のような場合は

#hoge{font-size:2em;}*{color:red;background:red!important;}

結果は以下のようになります。

var element =document.getElementById('hoge');var selectors = getCascadedCSSSelectors(element);alert(selectors);// ['*', '#hoge', '*']

まとめ

getCascadedCSSSelectors 便利すぎる！
みなさんも触ってみてはいかがでしょうか。