%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

%Hyperlinks
\usepackage{multicol}




%Kopfzeile
\ihead{CSS}
\chead{}
\ohead{http://kohnlehome.de/html/css-selektoren.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
    \LARGE % Schriftgröße
    \bfseries % Fettdruck
    \sffamily % Serifenlose Schrift
    CSS-Selektoren
\end{center}

\begin{multicols}{2}
    \subsection*{Grundlegende Selektoren}
    \begin{itemize}
        \item Universal: \texttt{*}
        \item Typ: \texttt{Element}
        \item Klasse: \texttt{.Klasse}
        \item ID: \texttt{\#ID}
        \item Attribut: \texttt{[Attribut]}, \texttt{[Attribut=Wert]}, ...
    \end{itemize}

    \subsection*{Kombinatoren}
    \begin{itemize}
        \item Nachfahren: \texttt{A B}
        \item Kind: \texttt{A > B}
        \item Geschwister: \texttt{A \~}  \texttt{B}
        \item angrenzende Geschwister: \texttt{A + B}
    \end{itemize}

    \subsection*{Gruppierung (Selector List)}
    \begin{itemize}
        \item A oder B: \texttt{A, B}
    \end{itemize}

    \vfill\null
    \columnbreak

    \subsection*{Pseudoelemente}
    \begin{itemize}
        \item \texttt{::before}
        \item \texttt{::after}
        \item \texttt{::first-letter}
        \item \texttt{::first-line}
        \item \texttt{::selection}
    \end{itemize}

    \subsection*{Pseudoklassen (Zustand des Elements)}
    \begin{itemize}
        \item Links
              \begin{itemize}
                  \item \texttt{:link} (unbesucht)
                  \item \texttt{:visited} (besucht)
                  \item \texttt{:hover} (Mauszeiger über Link)
                  \item \texttt{:active} (momentan angeklickt)
              \end{itemize}

        \item Input
              \begin{itemize}
                \item \texttt{:focus}
                \item \texttt{:checked}
                \item \texttt{:enabled}
                \item \texttt{:disabled}
                \item \texttt{:valid}
                \item \texttt{:invalid}
            \end{itemize}

            \item Baumstruktur
            \begin{itemize}
                \item \texttt{:root} (Wurzel des Baums (=html))
                \item \texttt{:first-child} (erstes Kind)
                \item \texttt{:last-child} (letztes Kind)
                \item \texttt{:nth-child(3)} (drittes Kind)
                \item \texttt{:nth-child(even)} (alle geraden Kinder)
                \item \texttt{:nth-child(odd)} (alle ungeraden Kinder)
                \item \texttt{:empty} (ohne Inhalt)
            \end{itemize}

        \item Logik
            \begin{itemize}
                \item \texttt{:not( Selector )} (Negation)                
            \end{itemize}
\end{itemize}
\end{multicols}


\end{document}
