CSS - The ":"-Selectors

avatar
(Edited)

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?</p>
        <hr>
    </div>
    <div>
        <p>Here is a Link to <a id='link_to' href='https://www.blurt.blog'>BLURT</a>.</p>
    </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;
}
stem development css sass deutsch pob tutorial hive-engine steemstem
0
0
0.000
4 comments
avatar

Hallo Ozelot:)

Mir ist da eins aufgefallen. Wenn jemand das versuchen möchte, was du da anführst, wird es ohne paar Hinweise nicht funktionieren. Ich würd da dazuschreiben, dass man 2 Dateien im selben Verzeichnis braucht. Eine Datei mit einer HTML-Endung, gerne index.html, sowohl in diesem Fall die selectors2.css, um die Stylesheets verwenden zu können.

0
0
0.000
Reply
avatar

Da hast du natürlich Recht. Da war ich etwas zu Voreilig :)
Wird editiert...

0
0
0.000
Reply
avatar

The people doing V2K with remote neural monitoring want me to believe this lady @battleaxe is an operator. She is involved deeply with her group and @fyrstikken . Her discord is Battleaxe#1003. I cant prove she is the one directly doing the V2K and RNM. Doing it requires more than one person at the least. It cant be done alone. She cant prove she is not one of the ones doing it. I was drugged in my home covertly, it ended badly. They have tried to kill me and are still trying to kill me. I bet nobody does anything at all. Ask @battleaxe to prove it. I bet she wont. They want me to believe the V2K and RNM in me is being broadcast from her location. And what the fuck is "HOMELAND SECURITY" doing about this shit? I think stumbling over their own dicks maybe? Just like they did and are doing with the Havana Syndrome.

They are reckless and should have shown the proper media what they had before taking me hostage for 5 years.

What would you say while having a gun pointed at your head from an undisclosed location? Have people find it? My hands are tied while they play like children with a gun to my head. Its a terrorist act on American soil while some yawn and say its not real or Im a mental case. Many know its real. This is an ignored detrimental to humanity domestic threat. Ask informed soldiers in the American military what their oath is and tell them about the day you asked me why. Nobody has I guess. Maybe someone told ill informed soldiers they cant protect America from military leaders in control with ill intent. How do we protect locked up soldiers from telling the truth? https://ecency.com/fyrstikken/@fairandbalanced/i-am-the-only-motherfucker-on-the-internet-pointing-to-a-direct-source-for-voice-to-skull-electronic-terrorism

0
0
0.000
Reply