CSS - The ":"-Selectors

English

The ":" selectors provide a way to temporarily add special styles to HTML elements. After this functionality is over, the styles are restored to their original state. Here are a few examples.

:active

If an element is provided with the selector active, then this element changes by clicking on it with the left mouse button. If you release the left mouse button, the element is returned to its original state.

:hover

With hover an element changes when you move the mouse pointer over this area. In the case of an element like in this example, the whole container div will be changed even if there are child elements are inside the container.

:link

The link selector can be used to edit selected unvisited links (or all unvisited links) with CSS.

:visited

Just like with link you can use visited to mark selected links that you have visited.

:before, :after

With before or after a content is inserted before or after the element. You can also make changes with CSS like in this example.

:first-child, :n-th-child(n)

With first-child or n-th-child(n) you can access elements within a container (div,span) or list (ul).
We can access the first or the n-th element without needing an ID. Instead, with n we can specify an index to access a specific element.

There are a number of other selectors. With the help of these selectors and selectors for relationships between elements, beautiful web pages can be styled and there are almost no limits to your own creativity.

Deutsch

Die ":"-Selektoren bieten eine Möglichkeit HTML-Elemente mit Funktionen auszustatten die dann mithilfe von CSS auf bestimmte Elemente zuzugreifen um diese zu stylen. Hier folgen ein paar Beispiele.

:active

Wenn ein Element mit dem Selektor active versehen wird, dann verändert sich dieses Element, indem man mit der linken Maustaste drauf klickt. Lässt man die linke Maustaste los, so wird das Element wieder in den Ursprünglichen Zustand zurückversetzt.

:hover

Mit hover verändert sich ein Element, wenn man mit dem Mauszeiger über diese Fläche fährt.
Bei einem div wie hier im Beispiel, wird der komplette Container verändert auch wenn sich Kindselemente
innerhalb des Containers befinden.

:link

Mit dem link Selektor können ausgewählte unbesuchte Links (oder alle unbesuchte Links) mit CSS
bearbeitet werden.

:visited

Genauso wie mit link kann man mit visited ausgewählte Links markieren, die man besucht hat.

:before, :after

Mit before oder after wird ein Inhalt vor- oder nach dem Element eingefügt.
Man kann mit CSS auch entsprechende Veränderungen vornehmen wie in diesem Beispiel.

:first-child, :n-th-child

Mit dem first-child oder dem last-child kann man innerhalb eines Containers (div,span) oder Listen (ul)
auf das erste oder das letzte Element zugreifen ohne eine ID zu benötigen.

Innerhalb der unsortieren Liste "root" greifen wir auf den ersten Paragraphen und dem letzten Paragraphen zu und ändern die
Schriftfarbe. Mit n-th-child(n) können wir einen Index angeben, um auf ein bestimmtes Element zuzugreifen.

Es gibt noch eine Reihe von weiteren Selektoren. Mithilfe dieser Selektoren und Selektoren für Beziehungen zwischen Elementen lassen sich schöne Webseiten stylen und der eigenen Kreativität sind fast keine Grenzen gesetzt.

Edit: Damit ihr dieses Beispiel mal ausprobieren könnt, kopiert dazu den Inhalt der folgenden HTML-Datei und speichert es als Textdatei mit der Endung *.html ab. Zum Beispiel: index.html.
Den Inhalt der folgenden CSS-Datei auch als Textdatei 'selectors2.css' im selben Verzeichnis abspeichern. Danach einfach die HTML-Datei mit dem Browser eurer Wahl öffnen.

HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="CSS Selectors">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link rel='stylesheet' type='text/css' href='selectors2.css'>
</head>
<body>
    <div id='container'>
        <p id="textcontent">This is a text inside a paragraph. Nice, isn't it?
        
    
    
        Here is a Link to BLURT.
    </div>
    <ul id='root'>
        <p>The first child of this DIV</p>
        <p>The second child of this DIV</p>
        <p>The third child of this DIV</p>
        <p>The fourth child of this DIV</p>
        <p>The last child of this DIV</p>
    </ul>
</body>

CSS

#textcontent {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    color: gray;
}

#textcontent:active {
    color: red;
    background-color: yellow;
    font-weight: bold;
}

#textcontent::before {
    content: 'Hello.';
    font-size: 14px;
    border-style: dotted;
    border-color: green;
}

#textcontent::after {
    content: 'This was included after the previous paragraph';
    font-size: 14px;
    border-style: dotted;
    border-color: green;
}

#container:hover {
    background-image: radial-gradient(circle,lightblue,red);
}

#link_to:link {
    text-decoration: none;
    border-style: ridge;
    border-color: red;
}

#link_to:visited {
    text-decoration: none;
    border-style: ridge;
    border-color: green;
}

#root > p:first-child {
    color: red;
}

#root > p:last-child {
    color: orange;
}

#root > p:nth-child(3) {
    color: blue;
}