\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Bruce}
\pdfinfo{
  /Title (jquery-bruce.pdf)
  /Creator (Cheatography)
  /Author (Bruce)
  /Subject (Jquery Bruce Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Jquery Bruce Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Bruce} via \textcolor{DarkBackground}{\uline{cheatography.com/24245/cs/5920/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Bruce \\
  \uline{cheatography.com/bruce} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 1st November, 2015.\\
   Updated 12th May, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{x{2.32 cm} x{5.68 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Basic Selectors}}  \tn
% Row 0
\SetRowColor{LightBackground}
* & All Elements (including head) \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\#ID & Element of specified ID \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
.classname & Elements of classname \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
tagname & Elements of tagname \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
a{[}href{]} & Anchor with href attribute \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
a{[}href='value'{]} & Anchor with href = 'value' \tn 
% Row Count 8 (+ 2)
% Row 6
\SetRowColor{LightBackground}
a{[}href|='value'{]} & Anchor with href = 'value' \{\{nl\}\}{\bf{or}}\{\{nl\}\}  href starting with 'value-' \tn 
% Row Count 11 (+ 3)
% Row 7
\SetRowColor{white}
a{[}href\textasciicircum{}='value'{]} & Anchor with href beginning with 'value' \tn 
% Row Count 13 (+ 2)
% Row 8
\SetRowColor{LightBackground}
a{[}href!='value'{]} & Anchor with href not equal to value \tn 
% Row Count 15 (+ 2)
% Row 9
\SetRowColor{white}
a{[}href\$='value'{]} & Anchor with href ending with 'value' \tn 
% Row Count 17 (+ 2)
% Row 10
\SetRowColor{LightBackground}
a{[}href*='value'{]} & Anchor with href containing 'value' \tn 
% Row Count 19 (+ 2)
% Row 11
\SetRowColor{white}
a{[}href\textasciitilde{}='value'{]} & Anchor with href = 'value' \{\{nl\}\}{\bf{or}}\{\{nl\}\}href containing complete word 'value' \tn 
% Row Count 22 (+ 3)
% Row 12
\SetRowColor{LightBackground}
a{[}C1{]}{[}C2{]} & Anchor with attributes satisfying criteria C1 and C2 \tn 
% Row Count 24 (+ 2)
% Row 13
\SetRowColor{white}
s1s2 & Elements satisfying \{\{nl\}\} selector1 {\bf{and}} selector2 \tn 
% Row Count 26 (+ 2)
% Row 14
\SetRowColor{LightBackground}
s1,s2 & Elements satisfying \{\{nl\}\} selector1 {\bf{or}} selector2 \tn 
% Row Count 28 (+ 2)
% Row 15
\SetRowColor{white}
s1\textgreater{}s2 & Elements satisfying \{\{nl\}\} selector2 \{\{nl\}\} {\bf{and}} \{\{nl\}\} direct child of selector1 \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.32 cm} x{5.68 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Basic Selectors (cont)}}  \tn
% Row 16
\SetRowColor{LightBackground}
s1 s2 & Elements satisfying \{\{nl\}\} selector2 \{\{nl\}\} {\bf{and}}  \{\{nl\}\} descendants of selector1 \tn 
% Row Count 3 (+ 3)
% Row 17
\SetRowColor{white}
s1+s2 & Elements satisfying \{\{nl\}\} selector2 \{\{nl\}\} {\bf{and}} \{\{nl\}\}  next immediate sibiling of selector1 \tn 
% Row Count 7 (+ 4)
% Row 18
\SetRowColor{LightBackground}
s1\textasciitilde{}s2 & Elements satisfying \{\{nl\}\} selector2 \{\{nl\}\} {\bf{and}} \{\{nl\}\} next sibiling of selector1 \tn 
% Row Count 11 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.44 cm} x{6.56 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Form Filters}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{:button} & \textless{}button\textgreater{} \{\{nl\}\}\textless{}input type = submit, reset or button\textgreater{} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:checkbox} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{:checked} & checked or selected state \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{:selected} & selected option of \textless{}select\textgreater{} \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{:disabled} \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:enabled} \tn 
% Row Count 9 (+ 1)
% Row 6
\SetRowColor{LightBackground}
:file & \textless{}input type="file"\textgreater{} \tn 
% Row Count 10 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:focus} \tn 
% Row Count 11 (+ 1)
% Row 8
\SetRowColor{LightBackground}
:image & \textless{}intput type="image"\textgreater{} \tn 
% Row Count 12 (+ 1)
% Row 9
\SetRowColor{white}
:input & \textless{}input\textgreater{} \{\{nl\}\}\textless{}select\textgreater{} \{\{nl\}\}\textless{}textarea\textgreater{} \{\{nl\}\}\textless{}button\textgreater{} \tn 
% Row Count 14 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\seqsplit{:password} & \textless{}input type="password"\textgreater{} \tn 
% Row Count 16 (+ 2)
% Row 11
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:radio} \tn 
% Row Count 17 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{:reset} \tn 
% Row Count 18 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:submit} \tn 
% Row Count 19 (+ 1)
% Row 14
\SetRowColor{LightBackground}
:text & \textless{}input type="text"\textgreater{} \tn 
% Row Count 20 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Attributes and Properties}}  \tn
% Row 0
\SetRowColor{LightBackground}
\$(A).attr(name) & get specified attribute value (in string) for first element in \$(A) \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\$(A).attr(name,value|Function)\{\{nl\}\}\$(A).attr(\{name:value|Function,etc\}\} & set specified attribute for all elements in \$(A) \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\$(A).removeAttr(name)} \tn 
% Row Count 9 (+ 1)
% Row 3
\SetRowColor{white}
\$(A).prop(name) & get specified attribute value for first element in \$(A) \tn 
% Row Count 12 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\$(A).prop(name,value|Function)\{\{nl\}\}\$(A).attr(\{name:value|Function,etc\}\}} \tn 
% Row Count 14 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\$(A).removeProp(name)} \tn 
% Row Count 15 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\$(A).data(name,value) & Store name=value pair in jQuery memory cache\{\{nl\}\}if name is my-love, it is stored as myLove \tn 
% Row Count 20 (+ 5)
% Row 7
\SetRowColor{white}
\$(A).data({[}name{]}) & Get name value from jQuery Cache else data-name attribute \tn 
% Row Count 23 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\$(A).removeData({[}name{]})\{\{nl\}\}\$.removeData(js element,{[}name{]})} \tn 
% Row Count 25 (+ 2)
% Row 9
\SetRowColor{white}
\$.hasData(js element) & Check if element has any associated data in jqeury cache \tn 
% Row Count 28 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.08 cm} x{3.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Position Filters}}  \tn
% Row 0
\SetRowColor{LightBackground}
:first\{\{nl\}\}:last\{\{nl\}\}:eq(n) & nth element (0-based index) \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
:lt(n)\{\{nl\}\}:gt(n) & elements before/after nth index \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
:even\{\{nl\}\}:odd & elements at even /odd index \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
:first-child\{\{nl\}\}:last-child\{\{nl\}\}nth-child(n)\{\{nl\}\}nth-child(even|odd)\{\{nl\}\}nth-child(Xn+Y) & n\textasciicircum{}th\textasciicircum{} child (1-based index) \tn 
% Row Count 11 (+ 5)
% Row 4
\SetRowColor{LightBackground}
nth-last-child(n)\{\{nl\}\}nth-last-child(even|odd)\{\{nl\}\}nth-last-child(Xn+Y) & n\textasciicircum{}th\textasciicircum{} child, starting from the last \tn 
% Row Count 15 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{nth-of-type(n)\{\{nl\}\}nth-of-type(even|odd)\{\{nl\}\}nth-of-type(Xn+Y)} \tn 
% Row Count 17 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{nth-last-of-type(n)\{\{nl\}\}nth-last-of-type(even|odd)\{\{nl\}\}nth-last-of-type(Xn+Y)} \tn 
% Row Count 19 (+ 2)
% Row 7
\SetRowColor{white}
:only-child & elements with no sibilings \tn 
% Row Count 21 (+ 2)
% Row 8
\SetRowColor{LightBackground}
:only-of-type & elements with no sibilings of same type \tn 
% Row Count 24 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.16 cm} x{5.84 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Content Filters}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{:contains(text)} & elements containing text \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:empty} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{:has(selector)} & elements containing at least one selector \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
:parent & elements with at least one child node \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.44 cm} x{6.56 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Other Filters}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{:animated} & elements currently under animated control \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\seqsplit{:header} & \textless{}h1\textgreater{} through \textless{}h6\textgreater{} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{:visible} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:hidden} \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{:lang(language)} \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{:not(selector)} \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
:root & element which is root of the document \tn 
% Row Count 9 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{:target} & element targeted by the document's URI's identifier \tn 
% Row Count 11 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}