(S)CSS - Simple Selectors

avatar
(Edited)

English

With the help of CSS selectors you can access certain HTML elements and then style them as you wish. You can not only select a tag, but also create groups and relationships between HTML elements. This allows you to edit multiple HTML elements at the same time. Here are a few examples of commonly used selectors.

  • TAG

If you specify a tag, for example p, then this style will affect all paragraphs within the HTML file.

  • .classname

A class is used when you want to style a certain number of elements at the same time. Caution! Classes overwrite the style. In this example all paragraphs p are overwritten with the style as defined in the class.

You can assign an ID to each HTML element. An ID must be unique. This is used when you want to style only this one element. Caution! Also here tag styles and even class styles are overwritten.

The order of overrides are: ID > Class > Tag

Now there is the possibility to select several elements or to create relations between elements in order to style them.

  • elem_1, elem_2, ... , elem_n

With a comma between elements, you can select and style several at once.

  • outer inner

Selects all inner elements that are inside the outer element. In this example the outer element is a DIV and the inner elements are all with the class 'inner_div'.

  • parent > children

Selects all children whose parents are parent.

Deutsch

Mithilfe von Selektoren kann man auf bestimmte HTML-Elemente zugreifen und diese dann nach belieben stylen. Man kann nicht nur ein
bestimmten Tag auswählen, sondern auch Gruppen und Beziehungen zwischen HTML-Elementen hererstellen. Damit lassen sich mehrere
HTML-Elemente gleichzeitig bearbeiten. Hier folgen ein paar Beispiel von häufig genutzten Selektoren.

  • Tag

Wenn man ein Tag angibt, zum Beispiel p, dann hat dieser Style auswirkungen auf alle Paragraphen innerhalb der HTML-Datei.

  • .classname

Eine Klasse verwendet man dann, wenn man eine bestimmte Anzahl an Elementen gleichzeitig stylen möchte.
Vorsicht! Klassen überschreiben den Style. In diesem Beispiel werden alle Paragraphen p mit dem
Style wie er in der Klasse definiert wird überschrieben.

Man kann jedem HTML-Element eine ID vergeben. Eine ID muss eindeutig sein. Diese wird verwendet wenn man nur dieses eine Element stylen möchte.
Vorsicht! Auch hier werden Tag-Styles und sogar Klassenstyles überschrieben.

Die Reihenfolge von Überschreibungen lauten: ID > Class > Tag

Nun gibt es noch die Möglichkeit mehrere Elemente auszuwählen oder Beziehungen zwischen Elementen zu erstellen um diese
dann zu stylen.

  • elem_1, elem_2, ... , elem_n

Mit einem Komma zwischen Elemente kann man mehrere gleichzeitig auswählen und stylen.

  • outer inner

Selektiert alle inneren Elemente die sich innerhalb des äußeren Elements befinden. In diesem Beispiel
ist das äußere Element ein DIV und die inneren Elemente alle mit der Klasse 'inner_div'.

  • parent > children

Selektiert alle Kinder dessen Eltern parent sind.

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 'selectors1.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='selectors1.css'>
</head>
<body>
    <p>A text outside a container</p>
    <div>
        <p>First paragraph inside a container</p>
        <p class='group'>Paragraph with a class</p>
        <ul>
            <li>Listitem 1</li>
            <li>Listitem 2</li>
            <li><p id='unique'>Listitem 3</p></li>
            <li>Listitem 4</li>
            <li>Listitem 5</li>
            <li><p class='group'>Paragraph with a class</p></li>
        </ul>
    </div>
    <h4>A header under the container, called div</h4>
    <p class='group'>Paragraph with a class</p>
    <hr>
    <div id='relation'>
        <p>Text within the relation div</p>
        <h5>Headertext</h5>
        <div>
            <p class='inner_div'>Text inside inner div</p>
            <p class='inner_div'>Text inside inner div</p>
            <p class='inner_div2'>Text inside inner div</p>
            <p class='inner_div2'>Text inside inner div</p>
        </div>
    </div>
</body>

CSS

p {
    font-size: 20px;
}

.group {
    font-size: 14px;
    font-style: bold;
    color:red;
}

#unique {
    font-size: 10px;
    border-style: ridge;
}

/** create a border for all h5 and this specific div with the ID=relation **/
h5, #relation {
    border-style: solid;
}

/** selects all classes with the name 'inner_div', if exists, inside all div **/
div .inner_div {
    font-style: italic;
}

/** selects all classes with 'inner_div2' where the parent is a div **/
div > .inner_div2 {
    color:blue;
}
stem development css sass deutsch pob hive-engine tutorial steemstem
0
0
0.000
3 comments
avatar
(Edited)

It's a little time ago, that I tried to learn about html and css.
Since apprx a week I want to repeat a little bit. The reason was the vim editor and that I liked to have a possibility to use it.

I started with html again and will go further to css. But with no stress.

oh, I just remembered THAT one.

https://peakd.com/hive-174695/@jeyf123/my-entry-for-lmac67

css animations

0
0
0.000
Reply
avatar

Genau. Ohne Stress lernt es sich auch am besten. Wichtig ist nur sich immer kleine Ziele zu setzen und darauf dann aufzubauen.

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