build a matching function in CSS for any nested object structure!


\begin{DoxyCode}{0}
\DoxyCodeLine{var language = require('cssauron')(\{}
\DoxyCodeLine{    tag: 'tagName'}
\DoxyCodeLine{  , contents: 'innerText'}
\DoxyCodeLine{  , id: 'id'}
\DoxyCodeLine{  , class: 'className'}
\DoxyCodeLine{  , parent: 'parentNode'}
\DoxyCodeLine{  , children: 'childNodes'}
\DoxyCodeLine{  , attr: 'getAttribute(attr)'}
\DoxyCodeLine{\})}
\DoxyCodeLine{}
\DoxyCodeLine{var selector = language('body > \#header .logo')}
\DoxyCodeLine{  , element = document.getElementsByClassName('logo')[0]}
\DoxyCodeLine{}
\DoxyCodeLine{if(selector(element)) \{}
\DoxyCodeLine{  // element matches selector}
\DoxyCodeLine{\} else \{}
\DoxyCodeLine{  // element does not match selector}
\DoxyCodeLine{\} }

\end{DoxyCode}


It\textquotesingle{}s easy to use with your favorite nested tree structures! Delicious with HTML! Digestable with JSON!

\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{4}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ HTML   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ JSON   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ GLSL AST   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ JS AST (Esprima)    }\\\cline{1-4}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ HTML   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ JSON   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ GLSL AST   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ JS AST (Esprima)    }\\\cline{1-4}
\endhead
\href{http://npm.im/cssauron-html}{\texttt{ cssauron-\/html}}   &\href{http://npm.im/cssauron-json}{\texttt{ cssauron-\/json}}   &\href{http://npm.im/cssauron-glsl}{\texttt{ cssauron-\/glsl}}   &\href{http://npm.im/cssauron-falafel}{\texttt{ cssauron-\/falafel}}   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_cssauron_README_autotoc_md7367}{}\doxysection{API}\label{md_sfcode_node_modules_cssauron_README_autotoc_md7367}
\hypertarget{md_sfcode_node_modules_cssauron_README_autotoc_md7368}{}\doxysubsubsection{require(\textquotesingle{}cssauron\textquotesingle{})(options) -\/$>$ selector factory}\label{md_sfcode_node_modules_cssauron_README_autotoc_md7368}
Import {\ttfamily cssauron} and configure it for the nested object structure you\textquotesingle{}ll want to match against.\hypertarget{md_sfcode_node_modules_cssauron_README_autotoc_md7369}{}\doxyparagraph{options}\label{md_sfcode_node_modules_cssauron_README_autotoc_md7369}
{\ttfamily options} are an object hash of lookup type to string attribute or {\ttfamily function(node)} lookups for queried nodes. You only need to provide the configuration necessary for the selectors you\textquotesingle{}re planning on creating. (If you\textquotesingle{}re not going to use {\ttfamily \#id} lookups, there\textquotesingle{}s no need to provide the {\ttfamily id} lookup in your options.)


\begin{DoxyItemize}
\item {\ttfamily tag}\+: Extract tag information from a node for {\ttfamily div} style selectors.
\item {\ttfamily contents}\+: Extract text information from a node, for {\ttfamily \+:contains(xxx)} selectors.
\item {\ttfamily id}\+: Extract id for {\ttfamily \#my\+\_\+sweet\+\_\+id} selectors.
\item {\ttfamily class}\+: {\ttfamily .class\+\_\+name}
\item {\ttfamily parent}\+: Used to traverse up from the current node, for composite selectors {\ttfamily body \#wrapper}, {\ttfamily body $>$ \#wrapper}.
\item {\ttfamily children}\+: Used to traverse from a parent to its children for sibling selectors {\ttfamily div + span}, {\ttfamily a $\sim$ p}.
\item {\ttfamily attr}\+: Used to extract attribute information, for {\ttfamily \mbox{[}attr=thing\mbox{]}} style selectors.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_cssauron_README_autotoc_md7370}{}\doxysubsubsection{selector\+\_\+factory(\textquotesingle{}some selector\textquotesingle{}) -\/$>$ match function}\label{md_sfcode_node_modules_cssauron_README_autotoc_md7370}
Compiles a matching function.\hypertarget{md_sfcode_node_modules_cssauron_README_autotoc_md7371}{}\doxysubsubsection{match(node) -\/$>$ false $\vert$ node $\vert$ \mbox{[}subjects, ...\mbox{]}}\label{md_sfcode_node_modules_cssauron_README_autotoc_md7371}
Returns false if the provided node does not match the selector. Returns truthy if the provided node {\itshape does} match. Exact return value is determined by the selector, based on the \href{http://dev.w3.org/csswg/selectors4/\#subject}{\texttt{ CSS4 subject selector spec}}\+: if only a single node is matched, only that node is returned. If multiple subjects are matched, a deduplicated array of those subjects are returned.

For example, given the following HTML (and {\ttfamily cssauron-\/html})\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<div id="{}gary-\/busey"{}>}
\DoxyCodeLine{    <p>}
\DoxyCodeLine{        <span class="{}jake-\/busey"{}>}
\DoxyCodeLine{        </span>}
\DoxyCodeLine{    </p>}
\DoxyCodeLine{</div> }

\end{DoxyCode}


Checking the following selectors against the {\ttfamily span.\+jake-\/busey} element yields\+:


\begin{DoxyItemize}
\item {\ttfamily \#gary-\/busey}\+: {\ttfamily false}, no match.
\item {\ttfamily \#gary-\/busey $\ast$}\+: {\ttfamily span.\+jake-\/busey}, a single match.
\item {\ttfamily !\#gary-\/busey $\ast$}\+: {\ttfamily div\#gary-\/busey}, a single match using the {\ttfamily !} subject selector.
\item {\ttfamily \#gary-\/busey $\ast$, p span}\+: {\ttfamily span.\+jake-\/busey}, a single match, though both selectors match.
\item {\ttfamily \#gary-\/busey !$\ast$ !$\ast$, !p $>$ !span}\+: {\ttfamily \mbox{[}p, span.\+jake-\/busey\mbox{]}}, two matches.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_cssauron_README_autotoc_md7372}{}\doxysubsection{Supported pseudoclasses}\label{md_sfcode_node_modules_cssauron_README_autotoc_md7372}

\begin{DoxyItemize}
\item {\ttfamily \+:first-\/child}
\item {\ttfamily \+:last-\/child}
\item {\ttfamily \+:nth-\/child}
\item {\ttfamily \+:empty}
\item {\ttfamily \+:root}
\item {\ttfamily \+:contains(text)}
\item {\ttfamily \+:any(selector, selector, selector)}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_cssauron_README_autotoc_md7373}{}\doxysubsection{Supported attribute lookups}\label{md_sfcode_node_modules_cssauron_README_autotoc_md7373}

\begin{DoxyItemize}
\item {\ttfamily \mbox{[}attr=value\mbox{]}}\+: Exact match
\item {\ttfamily \mbox{[}attr\mbox{]}}\+: Attribute exists and is not false-\/y.
\item {\ttfamily \mbox{[}attr\$=value\mbox{]}}\+: Attribute ends with value
\item {\ttfamily \mbox{[}attr$^\wedge$=value\mbox{]}}\+: Attribute starts with value
\item {\ttfamily \mbox{[}attr$\ast$=value\mbox{]}}\+: Attribute contains value
\item {\ttfamily \mbox{[}attr$\sim$=value\mbox{]}}\+: Attribute, split by whitespace, contains value.
\item {\ttfamily \mbox{[}attr$\vert$=value\mbox{]}}\+: Attribute, split by {\ttfamily -\/}, contains value. 
\end{DoxyItemize}