Kindselektoren in CSS - HTML5 | CSS3 Grundlagen Tutorial 2023

Kindselektoren in CSS - HTML5 | CSS3 Grundlagen Tutorial 2023
Was sind Kindselektoren in CSS3 und wie verwende ich diese mit einem HTML5 Dokument. Wir bauen uns eine Beispiel - Webseite und stylen mithilfe der Kindselektoren das Aussehen der Webseite.

In diesem HTML5 und CSS3 Grundlagen Tutorial geht es darum, Anfängern und Einsteigern HTML und CSS Schritt für Schritt näher zu bringen und den Einstieg zu erleichtern. In dieser HTML und CSS Tutorial-Reihe werde ich den Texteditor Atom verwenden um Dir die Basics von HTML5 und CSS3 näher zu bringen. Jeder der eine Programmiersprache lernen möchte benötigt zuerst Kenntnisse in HTML und CSS!

Hier der Link zur gesamten HTML und CSS Tutorial-Reihe für Dich:

Hier noch der Link zum GoogleDrive:
dort hinterlege ich sämtliche Dateien aus diesem Tutorial, für den Fall, daß es bei dem einen oder anderen User zu Problemen kommt. So kann jeder selbst kontrollieren wo der Fehler liegt, wenn mal etwas nicht
funktioniert ;-)

⚙️ Mein Equipment

🎧 Audiorecorder / Audiointerface:
🎙️ Mikrofon:
🎧 Lav-Headset Halterung für Lavalier Mikrofone:
🎥 Webcam:
💡 Videoleuchte:

Aktuelle Buchempfehlungen zu diesem und anderen Videos auf meinem Kanal. Diese Links sind Affiliate Links, falls Du über meine Links etwas kaufen solltest dann bekomme ich eine kleine Provision, somit kannst Du mich und meinen Kanal unterstützen. Dich kostet diese Unterstützung keinen Cent ;-) Besten Dank!

►HTML5 und CSS3: Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u. v. m. von Jürgen Wolf - 25. Januar 2019

►Schrödinger lernt HTML5, CSS und JavaScript: Das etwas andere Fachbuch. Der volle Durchmarsch für alle, die HTML5, CSS3 und JavaScript lernen wollen (Schrödinger programmiert, Band 4) Broschiert – 23. November 2018

►HTML5 Handbuch Taschenbuch (Professional Series) – 30. Juni 2014 – älter aber immer noch lesenswert!

►Praxiswissen Joomla! 3.x komplett: Das Kompendium für Joomla! ab Version 3.6 Gebundenes Buch – 12. Dezember 2016

Musik im Video:
Jack's Garage von Midnight North

#HTML5undCSS3_Tutorialgarage

[tami]

Perfekt erklärt wie Immer vielen Dank :)

[michaelw.]

Sehr schön erklärt, mein Lieber! Besten Dank und weiter so.

[teglami]

Ganz wichtiger Hinweis ab 7:04
Kennt man noch von früher, wenn man immer wieder die gleichen Dinge machen musste :)
Sehr gute Videos! Ganz und gar nicht langweilig.

[Mr.Ameise]

Einfach und perfekt geklärt danke sehr.
Bitte mach JavaScript

[thomasq.]

Tolle Tutorials, danke für deine Zeit und Mühe ...super umgesetzt und erklärt. Das Grundgerüst hab ich schon verinnerlicht !

[heinzhouben]

Servus Harry,
und wieder mal vielen Dank für Deine Mühe solche TOP-Videos zu erstellen.
Ich experimentiere dabei auch schon mal etwas herum und so war ich von einem Ergebnis doch recht überrascht:
Das letzte Kindelement in der CSS habe ich nicht mit body > span > i angesprochen., Deine Vorgehensweise ist logisch und nachvollziehbar. Ich habe das schlichtweg vergessen. Aber das Ergebnis, erster Rahmen blau, zweiter Rahmen gelb, blieb gleich???
Aus Platzgründen fasse ich die entsprechenden Befehle mal zeilenweise zusammen:
p > span > i { border: solid blue; }
span > i { border: solid yellow; }
Habe die Farben der Rahmen zur besseren Differenzierung hinzugefügt.
Eigentlich müßte der letzte Befehl doch auch den Rahmen der obersten Zeile wieder ersetzen (sequenzieller Abarbeitung der Befehle), macht er aber nicht??
Ist vielleicht durch das Ansprechen des Kindelementes mit p > span >i dieses Kindelement geschützt???
Habe ein paar mal die html-Datei überprüft, sie stimmt mit Deinem Gerüst überein?
Hab ich da einen Denkfehler???
Sorry wenn ich da Deine Zeit noch mehr in Anspruch nehme.
Mit grübelndem Gruß :)
Heinz

[marvinhensler]

Hey, deine Videos sind wirklich super und helfen mir enorm meine momentanen HTML Skills zu verbessern. Ich hoffe es wird noch sehr viele Videos von dir geben. Wie sieht es eig bei dir aus mit anderen Programmiersprachen?

[tomgoldig]

Wenn ich ( span > i ) doppelt im html habe wie kann ich dann jeweils beide sepperat ansprechen? Ich denke, ich muss dan nen anderen Selektor nehmen ist das richtig ? danke dir